设置伪元素的样式 ::after 不显示换行

Question

我想使用 CSS 为我的博客标题创建下划线效果。为此，我使用伪元素

::after

进行样式设置，并能够实现以下结果

当标题长度超过单行长度时就会出现问题，它不会遵循如下所示的环绕效果。

我用来生成这个效果的css样式是

// styles.sass
h1::after, 
h2::after
  position: absolute
  margin-top: -0.45em
  margin-left: -10px
  display: block
  width: 107%
  height: 0.5em
  background: #EFF239  
  content: ''
  z-index: -1
  border-bottom: 2px solid #ddd

h2::after
  background: #a5f1b1

有人可以指导我，如何设置 ::after 元素的样式，使下划线跟随标题文本吗？

Answer 1

不要使用伪元素，依赖box-shadow：

span {
  font-size: 30px;
  padding: 0 10px;
  box-shadow: 0 -.4em 0 #EFF239 inset;
  -webkit-box-decoration-break: clone;
}

<span>Some text here <br> and here</span>