如何为标题的一部分加下划线（例如前40px）？

Question

在简单的CSS中是否有可能只有部分标题下划线，特别是左边的第一个50px？

Answer 1

您可以使用:before伪元素并为其添加边框。

h1 {
  position: relative;
  line-height: 1.2em;
}
h1:before {
  position: absolute;
  left: 0;
  top: 1.2em;
  height: 0;
  width: 50px;
  content: '';
  border-top: 1px solid red;
}

<h1>This is a header, partly underlined</h1>

Answer 2

使用pseudo-element：

h1 {
  position: relative;
}
h1::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 50px;
  height: 2px;
  background-color: green;
}

<h1>foobar</h1>

Answer 3

您可以添加一个包含两个带下划线的非中断空格的伪元素。这样你就可以获得真正的下划线而不是边框​​。但是它仍然会越过像＃＆＃34; g＆＃34;。

这样的字母

＆＃13;

＆＃13;

h1::before {
  content:'\a0\a0\a0\a0\a0\a0\a0\a0';
  display:block;
  position:absolute;
  text-decoration:underline;
  width:50px;
  overflow:hidden;
}

＆＃13;

<h1>Headline</h1>
<h1>Another Headline</h1>

＆＃13;

＆＃13;

＆＃13;