CODEWITHSUNDEEP
css
Ralph
Ralph

Reputation: 897

CSS: Text-Indent and :Before

I wanted to know how to indent text with css without indenting the :before property. I want to show a triangle in the before section then indent the text in just a bit more so the triangle doesn't overlap the text.

If i do a text-indent on the main element, it also indents the :before part too.

.header {
border-bottom: 2px solid red; 
color: blue;
position: relative;
}

.header:before {
content: '';
width: 0; 
height: 0;
bottom: 0;
position: absolute;
border-right: 20px solid transparent;
border-left: 2px solid red;
border-bottom: 20px solid red;
}

Upvotes: 2

Views: 4392

Answers (1)

LcSalazar
LcSalazar

Reputation: 16841

The text-indent works... You just have to tell your pseudo element (since it's absolutelly positioned) to be on left: 0;.

See:

.header {
  border-bottom: 2px solid red; 
  color: blue;
  position: relative;
  text-indent: 20px;
}

.header:before {
  content: '';
  width: 0; 
  height: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  border-right: 20px solid transparent;
  border-left: 2px solid red;
  border-bottom: 20px solid red;
}
<div class="header">test</div>

Upvotes: 4

Related Questions