CODEWITHSUNDEEP
css
Samurai Jack
Samurai Jack

Reputation: 3125

before and after in CSS classes

I'm using a css class in order to have a small space before the text starts like this:

.this-text:before {
    content: "\00a0 \00a0 ";
}

this code works fine, it lets a padding before the text.

The problem comes when I want to add the same thing to the end of the text line.

Firstly, I tried to combine them like this:

.this-text:before, .this-text:after {
    content: "\00a0 \00a0 ";
}

no result, also no result if I use a separate class for after:

.this-text:after {
    content: "\00a0 \00a0 ";
}

Any suggestions?

Upvotes: 1

Views: 334

Answers (2)

Ylama
Ylama

Reputation: 2489

if understood corectly this must work?

i Added background color on the :before and :after to see the space it takes up.

p{display: inline-block; }

.this-text::before {
    content: "\00a0 \00a0 ";
    background-color: blue;
}

.this-text::after {
    content: "\00a0 \00a0 ";
    background-color: green;
}
<p class="this-text">text</p><p>text</p>

Upvotes: 1

Michael W. Czechowski
Michael W. Czechowski

Reputation: 3457

You just have to concatinate :before and :after correctly with a comma. Have a look at the working example. background, border and padding properties are only for visualisation and can be removed.

div {
  background: #BADBAD;
  padding: 1rem;
}

.this-text:before,
.this-text:after {
  content: "\00a0 \00a0 ";
  background: snow;
}

.this-text,
.another-text {
  border: 1px solid snow;
}
<div>
  <span class="this-text">This text</span><span class="another-text">Another text</span>
</div>

Upvotes: 1

Related Questions