Bootstrap bs-example

Question

I copied CSS code for bs-example from the Bootstrap 3.0.3 docs site. I'm kind of a beginner with CSS, so if anyone could explain me this I would be thankful.

The following code:

/* Echo out a label for the example */
.bs-example:after {
  content: "Example";
  position: absolute;
  top:  15px;
  left: 15px;
  font-size: 12px;
  font-weight: bold;
  color: #bbb;
  text-transform: uppercase;
  letter-spacing: 1px;
}

It works as expected,

but I would like the title, EXAMPLE, can be changeable. I would like to use a tag like let's say <zd></zd>.

Thanks in advance.

Answer 1

Prior to writing this answer, I didn't realise that editing Pseudo Elements (::after) with JavaScript was a little trickier. Although with this question/answer on StackOverflow made it relatively easy with JavaScript.

The concept was still the same, upon Page load the browser renders what is stated on the Style sheet, there after you must use JavaScript to manipulate it's contents to render something different.

Hence the CSS looks at the attr(data-content), which means it'll look for the data-content attribute within the HTML.

.bs-docs-example::after {
    content: attr(data-content);
}

This looks for the data-content="":

<div class="bs-docs-example" data-content="Example Header">

Which renders:

To change it there after, all you have to do is change it's data-content attribute with JavaScript, in the demo I use jQuery to quickly select the DOM element and adjust it's data-content attribute.

$('.bs-docs-example').attr('data-content', "New Header Title" );

Demo Fiddle: http://jsfiddle.net/u2D4M/

If you wanted to do this without jQuery:

<script>
     var getHeader = document.getElementById('bs-header');
     getHeader.attributes["data-content"].value = "Hi, New Title"; 
</script>

Demo Fiddle: http://jsfiddle.net/9wxwxd4s/

Answer 2

The :after selector Insert content after every .bs-example class. Here, the Word Example will be added after every .bs-example.

[please refer this link]http://www.w3schools.com/cssref/sel_after.asp

Instead of using content:"Example", you can edit your titles in html and assign the same class to all titles. header tags are preferred. ie., You should definitely create a new custom stylsheet and override the classes you want to modify. This is a way you can always go back to the default styling provide by bootstrap.

This is a simple and easy step followed by all web developers as per W3C std.

Still you want to change title by code, you can get help from jQuery or JS.

Tip from Christofer Eliasson: If you want to redesign your page, you can just exchange your custom stylesheet with a new one. Instead of getting a completely new bootstrap file to be able to start over. Also, if you just want to go back to the default styling on just a few elements, it would be a mess to remember what changes you have made. So, write your custom css code in a separate stylesheet.