CODEWITHSUNDEEP
csscss-content
macsplean
macsplean

Reputation: 609

Please explain: content:'';

Here is the code I have a question about

.store {
  display: block;
  position: relative;
}
.store:before, .store:after {
  display: block;
  position:absolute;
  content:'';
}
.store:before {
  background: url(store-before.png);
  height: 23px;
  width: 54px;
  top:-3px;
  left:-3px;

}
.store:after {
  background: url(store-after.png);
  height: 20px;
  width: 41px;
  bottom:-3px;
  right:-3px;
}

I noticed that when the "content" is anything besides two apostrophes, the before and after images don't show up. Can somebody explain the meaning of the two apostrophes? Thanks.

Upvotes: 2

Views: 164

Answers (4)

raam86
raam86

Reputation: 6871

Your particular code snippet is probably using it for clearing.

How ever you can use it to put repeating content next to elements like so:

span:before{
content:"Author: "
}
<span>Huckleberry Finn</span>

Will result in:

Author: Huckleberry Finn

Upvotes: 1

owenmelbz
owenmelbz

Reputation: 6584

To use the before and after elements, it needs to have some form of content before it will show the element, so you can use an empty string to pretend to be something there, obviously a space or empty will show nothing on the page, so you just get the rest of your css styling.

If you remove the content property then it wont show at all.

Its meant to be used for things like "..." or "read more" I imagine without having to have that in your html markup.

Upvotes: 1

BoltClock
BoltClock

Reputation: 723739

The two apostrophes denote a string. Two double quotes denote a string as well, which delimiter you use depends on preference and escaping needs; see here for all the details.

If there's nothing between the two string delimiters, either '' or "", then you have an empty string. If you have anything besides a string, it's some other value which may or may not be valid. See here for all the possible values for content. If you pass an invalid value, then like any other style declaration the browser will ignore it, and without any valid value content will default to normal, which is really none for the :before and :after pseudo-elements. That will prevent your pseudo-element from displaying.

Upvotes: 2

James Donnelly
James Donnelly

Reputation: 128791

The Generated content, automatic numbering, and lists section of the CSS2.1 specification explains this:

Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted.

content is what is added to the page. If no content is specified, nothing is added to the page at all (meaning that ultimately no styling gets applied). content: '' adds empty string content to the page.

Upvotes: 4

Related Questions