HTML H1 - 标题样式并发症

Question

div {
background-color: #ccc;
width: 100%;
color: #ffffff;
}

div > div {
background-color: #000;
width: 80%;
margin: auto;
}
h1::before {
  content: '';
  display:block;
  height: 30px;  /*height of icon */
   width: 30px;  /*width of icon */
  border-radius: 15px;
  color: #fff;
   position: absolute;
   left: 5%;
  margin-top: 30px;
      /*background */
    background: #ffffff no-repeat 0px 0px;
  
}

<div><div><h1>Für Designer, Schriftsetzer, Layouter, Grafikenthusiasten und alle anderen</h1><div><div>

上面的示例代码在 another 中使用 a 。实际代码使用另一个容器内的布局。所以截图中的点和线元素在那个容器之外。

点当前显示为伪元素。我可以显示圆圈，但我也想在它的左侧创建线条。需要将行的左端拉伸到浏览器的左边缘。

谢谢

Answer 1

div {
background-color: #ccc;
width: 100%;
color: #ffffff;
}

div > div {
background-color: #000;
width: 80%;
margin: auto;
}
h1::before {
  content: '';
  display:block;
  height: 30px;  /*height of icon */
   width: 30px;  /*width of icon */
  border-radius: 15px;
  color: #fff;
   position: absolute;
   left: 5%;
  margin-top: 30px;
      /*background */
    background: #ffffff no-repeat 0px 0px;
  
}

h1::after {
    content: '';
    display: block;
    height: 6px;
    width: 41px;
    border-radius: 15px;
    color: red;
    position: absolute;
    left: 0%;
    margin-top: 30px;
    background: #ffffff no-repeat 0px 0px;
    top: 35px;
}

<div><div><h1>Für Designer, Schriftsetzer, Layouter, Grafikenthusiasten und alle anderen</h1><div><div>

Answer 2

您可以通过向 H1 元素添加 :after 伪元素并对其应用一些样式来解决此问题。

我创建了一个可能对您有所帮助的代码示例。如果标题以多行显示，它还会垂直居中点和线：

div {
    background-color: #ccc;
    width: 100%;
    color: #ffffff;
  }
  
  div>div {
    background-color: #000;
    width: 80%;
    margin: auto;
  }
  
  h1 {
    position: relative;
  }
  
  h1::before {
    content: '';
    display: block;
    height: 30px;
    width: 30px;
    border-radius: 15px;
    color: #fff;
    position: absolute;
    left: -5%;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background: #ffffff no-repeat 0px 0px;
  
  }
  
  h1::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: -105%;
    border: 1px solid blue;
    width: 100%;
  }

    <div><div><h1>Für Designer, Schriftsetzer, Layouter, Grafikenthusiasten und alle anderen</h1><div><div>