Styling Pseudo element ::after shows no line-wrap

huangapple go评论140阅读模式
英文:

Styling Pseudo element ::after shows no line-wrap

问题

// 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
英文:

I wanted to create an underline effect for the Headings for my blog using css. For that, I used the Pseudo element ::after for styling and was able to achieve the following results

Styling Pseudo element ::after shows no line-wrap

The problem arises when the length of the Headings exceed the single line length, it doesn't follow the wrap-around effect like the one shown below.

Styling Pseudo element ::after shows no line-wrap

The css style I used to generate this effect is

// 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

Could someone guide me, how I could also style the ::after element such that the underline follows the Heading text ?

答案1

得分: 2

不要使用伪元素,依赖于阴影效果:

span {
  font-size: 30px;
  padding: 0 10px;
  box-shadow: 0 -.4em 0 #EFF239 inset;
  -webkit-box-decoration-break: clone;
}
<span>这里有一些文本 <br> 还有这里</span>
英文:

Don't use pseudo element, rely on box-shadow:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

&lt;span&gt;Some text here &lt;br&gt; and here&lt;/span&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年8月11日 02:52:31
  • 转载请务必保留本文链接:https://go.coder-hub.com/76878600.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定