User Tools

Site Tools


notes:css:selectors

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
notes:css:selectors [2016/11/04]
admin
notes:css:selectors [2016/11/04] (current)
admin
Line 108: Line 108:
 </​html>​ </​html>​
 </​code>​ </​code>​
 +
 +
 +Example: Using **:before** and **:after** pseudo-classes:​
 +
 +{{css_BeforeAfter.png}}
 +
 +<code html>
 +<​!DOCTYPE html>
 +<​html>​
 +    <​head>​
 +        <​title>​Test</​title>​
 +        <style type="​text/​css">​
 +            /* place brackets around a word */
 +            span.CurlyBrackets:​before {content: "​{";​}
 +            span.CurlyBrackets:​after {content: "​}";​}
 +            span.SquareBrackets:​before {content: "​[";​}
 +            span.SquareBrackets:​after {content: "​]";​}
 +  ​
 +            /* define a prefix */
 +            div.Person1:​before {content: "​Steve:​ "; color:red;}
 +            div.Person2:​before {content: "Bob: "; color:​blue;​}  ​
 +        </​style>​
 +    </​head>​
 +    <​body>​
 +        Brackets:<​br />
 +        <span class="​CurlyBrackets">​Hello</​span>​ in curly brackets<​br />
 +        <span class="​SquareBrackets">​Hello</​span>​ in square brackets<​br />
 +        <br />
 +        Conversation:​
 +        <div class="​Person1">​Hi!</​div>​
 +        <div class="​Person2">​Good to see you.</​div>​
 +        <div class="​Person1">​Yeah</​div>​
 +    </​body>​
 +</​html>​
 +</​code>​
 +
  
notes/css/selectors.txt ยท Last modified: 2016/11/04 by admin