CODEWITHSUNDEEP
csspseudo-element
giannisf
giannisf

Reputation: 2599

CSS after before same width

Is it possible for CSS pseudoelements to have the same width relative to content?

This is the result that I want enter image description here

My attempt:

.item::before, .item:after{
  background: url(https://i.imgur.com/rL1l2Rd.png) center center no-repeat;
 
  content: ' ';
  height: 100px;
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  
 
  
  
}
<h1 class='item'>content</h1>
<h1 class='item'>larger content</h1>

Upvotes: 0

Views: 307

Answers (1)

Temani Afif
Temani Afif

Reputation: 272590

Use flexbox for this

.item::before,
.item:after {
  background: #000;
  align-self:center;
  height:7px;
  border-radius:10px;
  content: ' ';
  margin:5px 5px 0;
}

h1 {
  display:flex;
}

.item::before {
  flex-basis:200px;
}
.item::after {
  flex-grow:1;
}
<h1 class='item'>content</h1>
<h1 class='item'>larger content</h1>

Upvotes: 1

Related Questions