HOME | DD

pica-ae — CSS Tricks: Before and After!
Published: 2014-05-07 07:56:00 +0000 UTC; Views: 13755; Favourites: 102; Downloads: 0
Redirect to original
Description body div#devskin7405315 * { background:transparent; border:none; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; margin:0; padding:0; } /* ------------------------------ GENERAL ------------------------------ */ body div#devskin7405315 .gr1 { display:none; } body div#devskin7405315 .gr2 { display:none; } body div#devskin7405315 .gr3 { display:none; } body div#devskin7405315 .tri { display:none; } body div#devskin7405315 h2 img { display:none; } body div#devskin7405315 a { color:#98ab0a; text-decoration:none; transition:color 0.5s; -moz-transition:color 0.5s; -webkit-transition:color 0.5s; -ms-transition:color 0.5s; -o-transition:color 0.5s; } body div#devskin7405315 a:hover { color:#b4cc00; text-decoration:underline; } body div#devskin7405315 h1, body div#devskin7405315 h2, body div#devskin7405315 h3, body div#devskin7405315 h4, body div#devskin7405315 h5, body div#devskin7405315 h6 { font-family:Georgia, serif; color:#414d4c; letter-spacing:0px; font-weight:bold; } body div#devskin7405315 .text ::selection { background:#f2d649; } body div#devskin7405315 .text ::-moz-selection { background:#f2d649; } body div#devskin7405315 .gr-box { } body div#devskin7405315 .gr-genericbox { border:none; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; position:static; background:url(https://i451.photobucket.com/albums/qq231/pica-ae/img_background.jpg) #f2f2f2; margin:10px 0px; padding:0px; font-family:Verdana; font-size:13px; line-height:20px; color:#333333; text-shadow:#ffffff 0px 1px 0px; } body div#devskin7405315 .divider { background:#cccccc; display:block; height:1px; } /* ------------------------------ GR-TOP ------------------------------ */ body div#devskin7405315 .gr-top { border:none; position:static; background:#4a5d4e url('https://dl.dropboxusercontent.com/u/22307794/css/CR/gr-top_trans.png') center; color:#FFFFFF; margin:0px!important; padding:0px!important; } body div#devskin7405315 .gr-top .gr { border:none; background:transparent; margin:0px!important; padding:40px 20px!important; margin:auto!important; max-width:680px; } body div#devskin7405315 .gr-top h2, body div#devskin7405315 .gr-top h2 a { background:url('https://dl.dropboxusercontent.com/u/22307794/dA/profile/TriCSS.png') no-repeat top left; color:#98ab0a; text-shadow:#37413e 0px 1px 0px; font-weight:normal; font-size:32px; letter-spacing:0.1px; padding-top:90px; transition:color 0.5s, box-shadow 0.5s; -moz-transition:color 0.5s, box-shadow 0.5s; -webkit-transition:color 0.5s, box-shadow 0.5s; -ms-transition:color 0.5s, box-shadow 0.5s; -o-transition:color 0.5s, box-shadow 0.5s; } body div#devskin7405315 .gr-top h2 a:hover { color:#b4cc00; text-decoration:none; text-shadow:#37413e 0px 2px 1px; } body div#devskin7405315 .gr-top .timestamp { display:none; } body div#devskin7405315 .gr-top span { border:none; background:transparent; margin:0px!important; padding:0px!important; } /* ------------------------------ GR-BODY ------------------------------ */ body div#devskin7405315 .gr-body { position:static; border:none; background:transparent; margin:0px; padding:0px; } body div#devskin7405315 .gr-body .gr { position:static; border:none; background:transparent; margin:0px!important; padding:0px!important; } /* ------------------------------ TEXT ------------------------------ */ body div#devskin7405315 .text { background:transparent; padding:20px; margin:auto; max-width:680px; } body div#devskin7405315 .text p { display:inline; } body div#devskin7405315 .text h1 { display:block; margin:0px!important; padding:0px; font-size:24px; } body div#devskin7405315 .text h2 { font-size:21px; } body div#devskin7405315 .text h3 { font-size:18px; } body div#devskin7405315 .text h4 { font-size:16px; } body div#devskin7405315 .text ol { list-style-type:decimal; margin:10px 20px; padding:0px; } body div#devskin7405315 .text ul { list-style-image:url('https://dl.dropbox.com/u/22307794/css/img_li.gif'); margin:10px 20px; padding:0px; } body div#devskin7405315 .text li { margin:5px 0px; } body div#devskin7405315 .text hr { background:url(https://i451.photobucket.com/albums/qq231/pica-ae/img_sidebar_hr.gif) repeat-x left; margin:0px; padding:0px; border:none; } body div#devskin7405315 .text em { } body div#devskin7405315 .text strong { color:#4a5d4e; font-size:150%; } body div#devskin7405315 .text .bu { font-size:11px; max-width:70%; margin:0 auto; } body div#devskin7405315 .shadow-holder { background:white; box-shadow:0px 1px 4px #b2b2b2; -moz-box-shadow:0px 1px 4px #b2b2b2; -webkit-box-shadow:0px 1px 4px #b2b2b2; margin:5px; padding:0px; vertical-align:middle; transition:background 0.5s ease; -moz-transition:background 0.5s ease; -webkit-transition:background 0.5s ease; -ms-transition:background 0.5s ease; -o-transition:background 0.5s ease; } body div#devskin7405315 .shadow-holder .mild .thumb img { padding:0px; vertical-align:middle; transition:opacity 0.5s ease; -moz-transition:opacity 0.5s ease; -webkit-transition:opacity 0.5s ease; -ms-transition:opacity 0.5s ease; -o-transition:opacity 0.5s ease; } body div#devskin7405315 .shadow-holder:hover { background:#f2f2f2; } body div#devskin7405315 .shadow-holder .mild .thumb img:hover { } /* ------------------------------ BOTTOM ------------------------------ */ body div#devskin7405315 .bottom { background:#4a5d4e; margin:0px; padding:20px; } body div#devskin7405315 .bottom a { color:#ffffff; text-decoration:none; text-shadow:#37413e 0px -1px 0px; } body div#devskin7405315 .bottom a:hover { color:#798e7f; text-shadow:#37413e 0px 1px 0px; text-decoration:none; } /* ------------------------------ FOOTER ------------------------------ */ body div#devskin7405315 .footer { background:#e5e5e5; line-height:30px; margin:0px; padding:20px; text-shadow:none; text-align:center; } body div#devskin7405315 .footer h1 { } body div#devskin7405315 .footer a { background:#98ab0a; color:#FFFFFF; font-weight:normal; margin:2px 0; padding:0px 10px; display:inline-block; height:30px; line-height:30px; transition:background 1s ease; -moz-transition:background 1s ease; -webkit-transition:background 1s ease; -ms-transition:background 1s ease; -o-transition:background 1s ease; } body div#devskin7405315 .footer a:hover { background:#FFFFFF; color:#98ab0a; } body div#devskin7405315 .suggestion { background:#ffffff; color:#333333; font-size:14px; padding:20px; } body div#devskin7405315 .suggestion h3 { text-align:center; } /* ------------------------------ DEVIATIONS ------------------------------ */ body div#devskin7405315 a.embedded-deviation { transition:opacity 0.5s ease; -moz-transition:opacity 0.5s ease; -webkit-transition:opacity 0.5s ease; -ms-transition:opacity 0.5s ease; -o-transition:opacity 0.5s ease; } body div#devskin7405315 a.embedded-deviation:hover { } body div#devskin7405315 a.embedded-deviation .iframe .deviantart .bubbleview .journal-wrapper .journal-wrapper2 , body div#devskin7405315 journal .journalcontrol .negate-box-margin .gr-box .gr-top { display:none; } /* ------------------------------ COLUMNS ------------------------------ */ body div#devskin7405315 .columns { display:inline-block; width:100%; height:100%; } body div#devskin7405315 .columns p, body div#devskin7405315 .columns .half { width:50%; display:block; float:left; padding-right:10px; } body div#devskin7405315 .left-half { height:300px; width:40%; float:left; padding-right:10px; } body div#devskin7405315 .right-half { width:50%; text-align:right; float:right; display:block; } body div#devskin7405315 .specs { background:#e5e5e5; padding:10px; text-shadow:none; } body div#devskin7405315 .right-half .shadow-holder { background:#f2f2f2; border:none; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; box-shadow:0px 1px 4px #b2b2b2; -moz-box-shadow:0px 1px 4px #b2b2b2; -webkit-box-shadow:0px 1px 4px #b2b2b2; margin:0; padding:0; vertical-align:middle; } body div#devskin7405315 .right-half .shadow-holder .shadow { } body div#devskin7405315 .right-half .shadow-holder .shadow a.thumb.lit { height:240px; width:320px; border-radius:10px 10px 0 0; -moz-border-radius:10px 10px 0 0; -webkit-border-radius:10px 10px 0 0; } body div#devskin7405315 .right-half .shadow-holder .shadow a.thumb.lit img { display:none; } body div#devskin7405315 .right-half .shadow-holder a.thumb.lit .wrap q { } body div#devskin7405315 .right-half .shadow-holder a.thumb.lit .wrap q { font-size:13px; line-height:20px; margin:0; padding:20px; position:absolute; right:0; left:0; } body div#devskin7405315 .right-half .shadow-holder a.thumb.lit .wrap q strong { display:block; background:#4a5d4e; color:#98ab0a; text-shadow:#37413e 0px 1px 0px; font-weight:normal; font-size:16px; margin:-20px; margin-bottom:10px; padding:20px; transition:color 0.5s, box-shadow 0.5s; -moz-transition:color 0.5s, box-shadow 0.5s; -webkit-transition:color 0.5s, box-shadow 0.5s; -ms-transition:color 0.5s, box-shadow 0.5s; -o-transition:color 0.5s, box-shadow 0.5s; } body div#devskin7405315 .right-half .shadow-holder:hover { background:#FFFFFF; } body div#devskin7405315 .right-half .shadow-holder:hover a.thumb.lit .wrap q strong { color:#b4cc00; text-shadow:#37413e 0px 2px 1px; } /* ------------------------------ BUTTONS ------------------------------ */ body div#devskin7405315 .button a { background:#98ab0a url('https://dl.dropboxusercontent.com/u/22307794/css/tricks/icon-journal.png') center no-repeat; background-position:10px; box-shadow:0px 1px 4px #b2b2b2; -moz-box-shadow:0px 1px 4px #b2b2b2; -webkit-box-shadow:0px 1px 4px #b2b2b2; color:#ffffff; font-weight:normal; font-size:16px; padding:10px 12px 10px 36px; text-shadow:#6b7807 0px -1px 0px; } body div#devskin7405315 .button a:hover { background:#a5b90f url('https://dl.dropboxusercontent.com/u/22307794/css/tricks/icon-journal-hover.png') center left no-repeat; background-position:10px; color:#6b7807; text-shadow:#b6c54d 0px 1px 0px; } /* ------------------------------ BOXES ------------------------------ */ body div#devskin7405315 .tip, body div#devskin7405315 .tip-small { background:#f7e37c; box-shadow:0px 1px 4px #b2b2b2; -moz-box-shadow:0px 1px 4px #b2b2b2; -webkit-box-shadow:0px 1px 4px #b2b2b2; color:#404040; font-family:'Inconsolata', monospace; font-size:14px; padding:20px 20px 20px 50px; text-shadow:#fbf1be 0px 1px 0px; } body div#devskin7405315 .tip b { margin-left:-30px; } body div#devskin7405315 .tip strong { color:#404040; font-size:14px; } body div#devskin7405315 .tip i, body div#devskin7405315 .tip em { font-style:normal; } body div#devskin7405315 .tip i { color:#e5004d; } body div#devskin7405315 .tip em { color:#1717e5; } body div#devskin7405315 .tip u { background:#1717e5; color:#FFFFFF; text-decoration:none; padding:0 2px; text-shadow:none; } body div#devskin7405315 .tip-small { box-shadow:1px 1px 1px #b2b2b2; -moz-box-shadow:1px 1px 1px #b2b2b2; -webkit-box-shadow:1px 1px 1px #b2b2b2; display:inline-block; font-size:12px; margin-left:8px; padding:2px 4px; position:relative; top:-2px; float:right; text-align:right; z-index:10; } body div#devskin7405315 .tip-small::before { content:' '; border-top:solid 8px transparent; border-bottom:solid 8px transparent; border-right:solid 8px #f7e37c; position:absolute; left:-8px; top:4px; } body div#devskin7405315 .tip-small i { opacity:0; filter:alpha(opacity=0); _zoom:1; transition:opacity 0.5s ease; -moz-transition:opacity 0.5s ease; -webkit-transition:opacity 0.5s ease; -ms-transition:opacity 0.5s ease; -o-transition:opacity 0.5s ease; display:block; float:left; position:absolute; background:#f7e37c; font-size:0; right:-20px; bottom:0px; left:-900px; top:0px; } body div#devskin7405315 .tip-small:hover i { opacity:0.5; filter:alpha(opacity=50); _zoom:1; } body div#devskin7405315 .attention { background:#4a5d4e; color:#FFFFFF; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; box-shadow:0px 1px 4px #b2b2b2; -moz-box-shadow:0px 1px 4px #b2b2b2; -webkit-box-shadow:0px 1px 4px #b2b2b2; padding:20px; text-shadow:#000000 0px -1px 0px; font-size:14px; } body div#devskin7405315 .attention a:hover { color:#FFFFFF; } /* ------------------------------ PRO AND CONS ------------------------------ */ body div#devskin7405315 .procon { display:inline!important; } body div#devskin7405315 .pro, body div#devskin7405315 .con { display:inline; float:left; width:50%; } body div#devskin7405315 .text .procon .pro ul { list-style-image:url('https://dl.dropbox.com/u/22307794/css/img_li_plus.gif'); margin:10px 20px; padding:0px; } body div#devskin7405315 .text .procon .con ul { list-style-image:url('https://dl.dropbox.com/u/22307794/css/img_li_minus.gif'); margin:10px 20px; padding:0px; } /* ------------------------------ MOBILE ------------------------------ */ @media only screen and (max-width: 767px) { body div#devskin7405315 .footer a { margin:4px 0; display:block; } } /* ------------------------------ CODE EXAMPLES ------------------------------ */ body div#devskin7405315 .text blockquote { margin:0px; padding:24px 20px 15px 20px; color:#333333; font-family:monospace; font-size:12px; border:none; background:url(https://i451.photobucket.com/albums/qq231/pica-ae/img_blockquote.gif) #ffffff; box-shadow:0px 1px 4px #b2b2b2; -moz-box-shadow:0px 1px 4px #b2b2b2; -webkit-box-shadow:0px 1px 4px #b2b2b2; text-shadow:none; position:relative; overflow:hidden; } body div#devskin7405315 .text blockquote span { color:#1717e5; } body div#devskin7405315 .text blockquote p { margin:0px; padding:0px 20px; } body div#devskin7405315 .text blockquote p span { color:#e5004d; } body div#devskin7405315 .text blockquote i { color:#338033; font-style:normal; } body div#devskin7405315 .images { text-align:center; } body div#devskin7405315 .images img { box-shadow:0px 1px 4px #b2b2b2; -moz-box-shadow:0px 1px 4px #b2b2b2; -webkit-box-shadow:0px 1px 4px #b2b2b2; margin:5px; } /* ------------------------------ CODE EXAMPLE BOXES ------------------------------ */ body div#devskin7405315 .da-box { border:1px solid #a6b3a6; background:#dae4d9; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:20px; font-family:Verdana; text-shadow:none; } body div#devskin7405315 .da-box h1, body div#devskin7405315 .da-box h2, body div#devskin7405315 .da-box h3, body div#devskin7405315 .da-box h4, body div#devskin7405315 .da-box h5, body div#devskin7405315 .da-box h6 { font-family:Verdana; } body div#devskin7405315 .da-box h1 { font-size:24px; } body div#devskin7405315 .da-box h2 { font-size:18px; } body div#devskin7405315 .da-box h3 { font-size:14px; } body div#devskin7405315 .da-box h4 { font-size:12px; } body div#devskin7405315 .da-box h5 { font-size:10px; } body div#devskin7405315 .da-box h6 { font-size:8px; } body div#devskin7405315 .da-box ul, body div#devskin7405315 .da-box ol { list-style-image:none; list-style-position:outside; margin:0 20px; padding:0; } body div#devskin7405315 .da-box p { display:block; margin:10px 0; } body div#devskin7405315 .da-box blockquote { margin:1em 0 1em 1em; padding:0.6em; border-left:5px solid #aaa; background:transparent; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; font-family:Verdana; } body div#devskin7405315 .da-box a { color:#337287; font-weight:normal; text-shadow:none; } body div#devskin7405315 .custom-box { margin:auto; max-width:400px!important; background:#664d80; color:#ffffff; padding:20px; text-shadow:none; } /* -- Background Images -- */ body div#devskin7405315 .tiffany1, body div#devskin7405315 .tiffany2, body div#devskin7405315 .tiffany3 { padding:20px; margin:0 40px; text-shadow:none; } body div#devskin7405315 .tiffany1 { background-image:url('https://dl.dropbox.com/u/22307794/css/tricks/372031.png'); } body div#devskin7405315 .tiffany2 { background-color:#bde6d8; background-image:url('https://dl.dropbox.com/u/22307794/css/tricks/372031.png'); background-position:center; background-repeat:no-repeat; background-attachment:scroll; } body div#devskin7405315 .tiffany3 { background:#bde6d8 url('https://dl.dropbox.com/u/22307794/css/tricks/372031.png') center no-repeat scroll; } body div#devskin7405315 .imagepractice { display:inline-block; margin:20px 0px; } body div#devskin7405315 .imagepractice1, body div#devskin7405315 .imagepractice2, body div#devskin7405315 .imagepractice3, body div#devskin7405315 .imagepractice4, body div#devskin7405315 .imagepractice5, body div#devskin7405315 .imagepractice6 { background:#3d5266; padding:20px; margin:0 40px 0 0; text-shadow:none; color:#ffffff; float:left; max-width:45%; } body div#devskin7405315 .imagepractice1 { background:url('https://dl.dropbox.com/u/22307794/css/tricks/busy_image.png') top; } body div#devskin7405315 .imagepractice2 { background:url('https://dl.dropbox.com/u/22307794/css/tricks/busy_pattern.png') top; } body div#devskin7405315 .imagepractice3 { background:url('https://dl.dropbox.com/u/22307794/css/tricks/hardedge_gradient.png') top no-repeat #3d5266; } body div#devskin7405315 .imagepractice4 { background:url('https://dl.dropbox.com/u/22307794/css/tricks/texture_image.png') top no-repeat #3d5266; } body div#devskin7405315 .imagepractice5 { background:url('https://dl.dropbox.com/u/22307794/css/tricks/subtle_pattern.png'); } body div#devskin7405315 .imagepractice6 { background:url('https://dl.dropbox.com/u/22307794/css/tricks/softedge_gradient.png') top no-repeat #3d5266; } body div#devskin7405315 .welcome { background:#EFE7E1 url('https://dl.dropbox.com/u/22307794/css/tricks/welcome.png') no-repeat; background-position:center 20px; max-width:400px; margin:auto; padding:90px 20px 20px 20px; text-shadow:none; } body div#devskin7405315 .hlimage { background:#EFE7E1; max-width:400px; margin:auto; padding:20px; text-shadow:none; } body div#devskin7405315 .hlimage h1 { color:#332115; background:url('https://dl.dropbox.com/u/22307794/css/tricks/hlimage.png') center left no-repeat; font-family:'Alegreya', Georgia, Serif; padding:0 0 0 30px; } /* -- Fonts -- */ body div#devskin7405315 .websafefonts { background:deepskyblue url('https://dl.dropbox.com/u/22307794/css/tricks/websafefonts.jpg') no-repeat; box-shadow:0px 1px 4px #b2b2b2; -moz-box-shadow:0px 1px 4px #b2b2b2; -webkit-box-shadow:0px 1px 4px #b2b2b2; color:#ffffff; font-size:20px; line-height:30px; padding:20px 20px 20px 50%; text-shadow:none; } body div#devskin7405315 .font-arial { font-family:Arial; } body div#devskin7405315 .font-arial-black { font-family:Arial Black; } body div#devskin7405315 .font-courier-new { font-family:Courier New; } body div#devskin7405315 .font-georgia { font-family:Georgia; } body div#devskin7405315 .font-impact { font-family:Impact; } body div#devskin7405315 .font-lucida-grande { font-family:Lucida Grande; } body div#devskin7405315 .font-tahoma { font-family:Tahoma; } body div#devskin7405315 .font-times-new-roman { font-family:Times New Roman; } body div#devskin7405315 .font-trebuchet-ms { font-family:Trebucht MS; } body div#devskin7405315 .font-verdana { font-family:Verdana; } body div#devskin7405315 .fonthierarchy1 { font-family:'Rufina', Georgia, Serif; font-size:18px; padding:10px 0; } body div#devskin7405315 .fonthierarchy2 { font-family:Georgia, Serif; font-size:18px; padding:10px 0; } body div#devskin7405315 .fonthierarchy3 { font-family:Serif; font-size:18px; padding:10px 0; } body div#devskin7405315 .fonthierarchy4 { font-family:Times New Roman; font-size:18px; padding:10px 0; } body div#devskin7405315 .sans-serif { font-family:sans-serif; font-size:18px; } body div#devskin7405315 .serif { font-family:serif; font-size:18px; } body div#devskin7405315 .fantasy { font-family:fantasy; font-size:18px; } body div#devskin7405315 .cursive { font-family:cursive; font-size:18px; } body div#devskin7405315 .monospace { font-family:monospace; font-size:18px; } body div#devskin7405315 .fonts-text { padding:20px; text-shadow:none; background:#664d80; color:#ffffff; font-family:'Josefin Sans', Sans-serif; font-size:16px; font-weight:400; line-height:25px; } body div#devskin7405315 .fonts-text h1 { color:#ffffff; font-family:'Josefin Sans', Sans-serif; font-size:24px; font-style:italic; font-weight:100; letter-spacing:5px; text-align:right; text-transform:capitalize; } body div#devskin7405315 .fonts-text h2 { color:#ffffff; font-family:'Josefin Sans', Sans-serif; font-size:18px; font-weight:700; letter-spacing:-1px; text-decoration:underline; text-transform:uppercase; } /* -- Lists -- */ body div#devskin7405315 .list1, body div#devskin7405315 .list2, body div#devskin7405315 .list3, body div#devskin7405315 .list4 { background:#EFE7E1; color:#332115; max-width:400px; margin:auto; padding:20px 40px; text-shadow:none; } body div#devskin7405315 .list1 ul { padding:0; margin:0; list-style-type:circle; list-style-image:none; list-style-position:inside; } body div#devskin7405315 .list2 ol { padding:0; margin:0; list-style-type:upper-roman; list-style-image:none; list-style-position:outside; } body div#devskin7405315 .list3 ol { padding:0; margin:0 0 0 20px; list-style-type:lower-latin; list-style-image:none; list-style-position:outside; } body div#devskin7405315 .list4 ul { padding:0; margin:0; list-style-type:none; list-style-image:url('https://dl.dropboxusercontent.com/u/22307794/css/tricks/list4_ul_img.png'); list-style-position:inside; } body div#devskin7405315 .listmenu, body div#devskin7405315 .listmenu a { text-shadow:none; margin:0px!important; padding:0px!important; } body div#devskin7405315 .listmenu ul { margin:0px; padding:0px; list-style:none; background:#ffffff; text-align:center; height:30px; } body div#devskin7405315 .listmenu ul li { display:inline-block; position:relative; margin:0px; padding:0px; } body div#devskin7405315 .listmenu li ul { position:absolute; left:0px; top:30px; display:none; margin:0px; padding:0px; } body div#devskin7405315 .listmenu ul li a { display:block; text-decoration:none; color:#fff; background:#17c3e5; height:30px; width:120px; text-align:center; line-height:30px; margin:0px; padding:0px; } body div#devskin7405315 .listmenu ul li a:hover { background:#369eb3; color:#fff; } body div#devskin7405315 .listmenu li:hover ul { display:block; } /* -- Before & After -- */ body div#devskin7405315 .da-box .i-ba { display:inline-block; } body div#devskin7405315 .da-box .i-ba:before, body div#devskin7405315 .da-box .i-ba:after { font-family:sans-serif; } body div#devskin7405315 .da-box .i-ba:before { content:' '; background:url('https://dl.dropboxusercontent.com/u/22307794/css/tricks/guillemets-before.png') no-repeat; display:inline-block; height:6px; width:8px; } body div#devskin7405315 .da-box .i-ba:after { content:' '; background:url('https://dl.dropboxusercontent.com/u/22307794/css/tricks/guillemets-after.png') no-repeat; display:inline-block; height:6px; width:8px; } body div#devskin7405315 .da-box .ba-list, body div#devskin7405315 .da-box .ba-image { margin:0; padding:0; } body div#devskin7405315 .da-box .ba-image h1 { color:#2864ff; font-size:18px; font-weight:bold; } body div#devskin7405315 .da-box .ba-image h1::before { content:' '; display:inline-block; background:url('https://dl.dropboxusercontent.com/u/22307794/css/tricks/ba_image_cat_before.png') no-repeat; height:20px; width:12px; margin:0 4px -3px 0; padding:0; } body div#devskin7405315 .da-box .ba-image h1::after { content:' '; display:inline-block; background:url('https://dl.dropboxusercontent.com/u/22307794/css/tricks/ba_image_cat_after.png') no-repeat; height:20px; width:12px; margin:0 0 -3px 4px; padding:0; } body div#devskin7405315 .da-box .ba-list ul { list-style-type:none; margin-left:14px; } body div#devskin7405315 .da-box .ba-list ul li::before { content:' '; display:block; float:left; background:#2864ff; height:8px; width:8px; margin:6px 6px 0 -14px; } body div#devskin7405315 .da-box .ba-arrow .button a { background:#2864FF; color:#FFFFFF; display:inline-block; height:40px; line-height:40px; padding:0 10px 0 10px; position:relative; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; } body div#devskin7405315 .da-box .ba-arrow .button a::after { content:' '; background:transparent; border-top:solid transparent 20px; border-right:none; border-bottom:solid transparent 20px; border-left:solid #2864FF 20px; position:absolute; right:-20px; } body div#devskin7405315 .da-box .ba-arrow .button a:hover { background:#183d99; text-shadow:none; } body div#devskin7405315 .da-box .ba-arrow .button a:hover::after { border-left:solid #183d99 20px; } /* -- Shapes -- */ body div#devskin7405315 .no-box { background:transparent; text-shadow:none; } body div#devskin7405315 .no-box .shapes { position:relative; } body div#devskin7405315 .no-box .shapes .square, body div#devskin7405315 .no-box .shapes .rectangle, body div#devskin7405315 .no-box .shapes .rounded, body div#devskin7405315 .no-box .shapes .circle, body div#devskin7405315 .no-box .shapes .oval, body div#devskin7405315 .no-box .shapes .triangle, body div#devskin7405315 .no-box .shapes .candy, body div#devskin7405315 .no-box .shapes .diamond, body div#devskin7405315 .no-box .shapes .star8, body div#devskin7405315 .no-box .shapes .star12, body div#devskin7405315 .no-box .shapes .asterisk, body div#devskin7405315 .no-box .shapes .star6, body div#devskin7405315 .no-box .shapes .crescent-moon, body div#devskin7405315 .no-box .shapes .heart, body div#devskin7405315 .no-box .shapes .hexagon { background:MediumVioletRed; margin:0 auto; } body div#devskin7405315 .no-box .shapes .square { height:100px; width:100px; } body div#devskin7405315 .no-box .shapes .rectangle { height:100px; width:300px; } body div#devskin7405315 .no-box .shapes .rounded { border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; height:100px; width:300px; } body div#devskin7405315 .no-box .shapes .circle { border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px; height:100px; width:100px; } body div#devskin7405315 .no-box .shapes .oval { border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; height:100px; width:300px; } body div#devskin7405315 .no-box .shapes .trapezoid { background:none; border-top:none; border-right:100px solid transparent; border-bottom:100px solid MediumVioletRed; border-left:50px solid transparent; width:100px; position:relative; left:200px; } body div#devskin7405315 .no-box .shapes .triangle { background:none; border-top:none; border-right:100px solid transparent; border-bottom:100px solid MediumVioletRed; border-left:100px solid transparent; display:inline-block; position:relative; left:200px; } body div#devskin7405315 .no-box .shapes .candy { height:50px; width:50px; position:relative; } body div#devskin7405315 .no-box .shapes .candy::before { content:' '; border-top:25px solid transparent; border-right:25px solid MediumVioletRed; border-bottom:25px solid transparent; border-left:25px solid MediumVioletRed; position:absolute; left:-50px; } body div#devskin7405315 .no-box .shapes .candy::after { content:' '; border-top:25px solid transparent; border-right:25px solid MediumVioletRed; border-bottom:25px solid transparent; border-left:25px solid MediumVioletRed; position:absolute; right:-50px; } body div#devskin7405315 .no-box .shapes .diamond { height:100px; width:100px; transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); } body div#devskin7405315 .no-box .shapes .star8 { height:100px; width:100px; } body div#devskin7405315 .no-box .shapes .star8::before { content:' '; display:block; background:MediumVioletRed; height:100px; width:100px; transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); } body div#devskin7405315 .no-box .shapes .star12 { height:100px; width:100px; position:relative; } body div#devskin7405315 .no-box .shapes .star12::before { content:' '; display:block; background:MediumVioletRed; height:100px; width:100px; transform:rotate(30deg); -moz-transform:rotate(30deg); -webkit-transform:rotate(30deg); -ms-transform:rotate(30deg); -o-transform:rotate(30deg); } body div#devskin7405315 .no-box .shapes .star12::after { content:' '; display:block; position:absolute; top:0; background:MediumVioletRed; height:100px; width:100px; transform:rotate(-30deg); -moz-transform:rotate(-30deg); -webkit-transform:rotate(-30deg); -ms-transform:rotate(-30deg); -o-transform:rotate(-30deg); } body div#devskin7405315 .no-box .shapes .slices { background:transparent; display:block; position:relative; left:240px; height:220px; overflow:hidden; } body div#devskin7405315 .no-box .shapes .slices .slice1, body div#devskin7405315 .no-box .shapes .slices .slice2, body div#devskin7405315 .no-box .shapes .slices .slice3, body div#devskin7405315 .no-box .shapes .slices .slice4 { height:100px; width:100px; display:inline-block; position:absolute; } body div#devskin7405315 .no-box .shapes .slices .slice1 { background:MediumVioletRed; border-radius:100px 0 0 0; -moz-border-radius:100px 0 0 0; -webkit-border-radius:100px 0 0 0; top:0; left:0; } body div#devskin7405315 .no-box .shapes .slices .slice2 { background:#7717e5; border-radius:0 100px 0 0; -moz-border-radius:0 100px 0 0; -webkit-border-radius:0 100px 0 0; top:0px; left:100px; } body div#devskin7405315 .no-box .shapes .slices .slice3 { background:#17aee5; border-radius:0 0 100px 0; -moz-border-radius:0 0 100px 0; -webkit-border-radius:0 0 100px 0; top:110px; left:110px; } body div#devskin7405315 .no-box .shapes .slices .slice4 { background:#17e525; border-radius:0 0 0 100px; -moz-border-radius:0 0 0 100px; -webkit-border-radius:0 0 0 100px; top:100px; left:0; } body div#devskin7405315 .no-box .shapes .asterisk { height:100px; width:20px; position:relative; } body div#devskin7405315 .no-box .shapes .asterisk::before { content:' '; display:block; background:MediumVioletRed; height:100px; width:20px; transform:rotate(60deg); -moz-transform:rotate(60deg); -webkit-transform:rotate(60deg); -ms-transform:rotate(60deg); -o-transform:rotate(60deg); } body div#devskin7405315 .no-box .shapes .asterisk::after { content:' '; display:block; position:absolute; top:0; background:MediumVioletRed; height:100px; width:20px; transform:rotate(-60deg); -moz-transform:rotate(-60deg); -webkit-transform:rotate(-60deg); -ms-transform:rotate(-60deg); -o-transform:rotate(-60deg); } body div#devskin7405315 .no-box .shapes .star6 { background:transparent; border-top:none; border-right:40px solid transparent; border-bottom:65px solid MediumVioletRed; border-left:40px solid transparent; display:inline-block; position:relative; left:260px; } body div#devskin7405315 .no-box .shapes .star6::before { content:' '; background:transparent; border-bottom:none; border-right:40px solid transparent; border-top:65px solid MediumVioletRed; border-left:40px solid transparent; display:block; position:absolute; top:20px; left:-40px; } body div#devskin7405315 .no-box .shapes .crescent-moon { border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px; height:100px; width:100px; position:relative; transform:rotate(-30deg); -moz-transform:rotate(-30deg); -webkit-transform:rotate(-30deg); -ms-transform:rotate(-30deg); -o-transform:rotate(-30deg); } body div#devskin7405315 .no-box .shapes .crescent-moon::after { content:' '; background:url(https://i451.photobucket.com/albums/qq231/pica-ae/img_background.jpg) #f2f2f2; border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px; display:inline-block; height:100px; width:100px; position:absolute; right:-20px; } body div#devskin7405315 .no-box .shapes .heart { background:MediumVioletRed; position:relative; height:80px; width:80px; transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); border-bottom-right-radius:5px; -moz-border-bottom-right-radius:5px; -webkit-border-bottom-right-radius:5px; } body div#devskin7405315 .no-box .shapes .heart::before, body div#devskin7405315 .heart::after { background:MediumVioletRed; width:80px; height:80px; border-radius:40px; -moz-border-radius:40px; -webkit-border-radius:40px; position:absolute; } body div#devskin7405315 .no-box .shapes .heart::before { content:' '; left:-40px; } body div#devskin7405315 .no-box .shapes .heart::after { content:' '; top:-40px; } body div#devskin7405315 .no-box .shapes .hexagon { height:100px; width:60px; position:relative; } body div#devskin7405315 .no-box .shapes .hexagon::before { content:' '; border-top:50px solid transparent; border-right:30px solid MediumVioletRed; border-bottom:50px solid transparent; position:absolute; left:-30px; } body div#devskin7405315 .no-box .shapes .hexagon::after { content:' '; border-top:50px solid transparent; border-bottom:50px solid transparent; border-left:30px solid MediumVioletRed; position:absolute; right:-30px; } body div#devskin7405315 .attention .border-frame { background:white; height:100px; width:200px; margin:0 auto; border-top:10px solid blue; border-right:10px solid red; border-bottom:10px solid yellow; border-left:10px solid green; } /* -- Journal break-down Part II - thumbs -- */ body div#devskin7405315 .thumb-structure, body div#devskin7405315 .thumb-default, body div#devskin7405315 .thumb-styled { text-align:center; } body div#devskin7405315 .thumb-structure .shadow-holder, body div#devskin7405315 .thumb-structure .shadow-holder .shadow, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb img, body div#devskin7405315 .thumb-structure a.embedded-deviation, body div#devskin7405315 .thumb-structure a.embedded-deviation img, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb img.lit, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb wrap, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb .wrap q, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb .wrap q strong { background:transparent; border:1px solid #a6b3a6; font-family:'Inconsolata', monospace; font-size:11px; margin:20px!important; padding:0; position:relative; } body div#devskin7405315 .thumb-structure .shadow-holder { box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow { } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb { display:block; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb img { } body div#devskin7405315 .thumb-structure a.embedded-deviation { } body div#devskin7405315 .thumb-structure a.embedded-deviation img { width:93%; float:left; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb.lit { width:350px; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb img.lit { } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb wrap { } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb .wrap q { display:block; font-family:Verdana; padding:0 0 0 20px; width:280px; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb .wrap q strong { display:block; font-family:Verdana; font-weight:normal; margin:20px 10px 10px 0!important; padding:10px; } body div#devskin7405315 .thumb-structure .shadow-holder::before, body div#devskin7405315 .thumb-structure .shadow-holder .shadow::before, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb::before, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb img::before, body div#devskin7405315 .thumb-structure a.embedded-deviation::before, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb wrap::before, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb .wrap q::before, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb .wrap q strong::before, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb.lit::before { background:#1717e5; color:#FFFFFF; height:16px; line-height:16px; padding:0 2px; position:absolute; top:2px; left:2px; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb::after, body div#devskin7405315 .thumb-structure a.embedded-deviation::after { background:#1717e5; color:#FFFFFF; height:16px; line-height:16px; padding:0 2px; position:absolute; top:22px; left:22px; } body div#devskin7405315 .thumb-structure .shadow-holder::before { content:'.shadow-holder'; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow::before { content:'.shadow'; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb::before { content:'a.thumb'; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb::after { content:'img'; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb img::before { content:'img'; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb.lit::before { content:'a.thumb.lit'; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb wrap::before { content:'wrap'; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb .wrap q::before { content:'q'; font-family:'Inconsolata', monospace; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb .wrap q strong::before { content:'strong'; font-family:'Inconsolata', monospace; } body div#devskin7405315 .thumb-structure a.embedded-deviation::before { content:'a.embedded-deviation'; } body div#devskin7405315 .thumb-structure a.embedded-deviation::after { content:'img'; } body div#devskin7405315 .thumb-default .shadow-holder { background:transparent; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; display:inline-block; margin:0; padding:0; vertical-align:baseline; } body div#devskin7405315 .thumb-default .shadow-holder .shadow { background:transparent; background-position:center center; background-repeat:no-repeat; display:block; padding:3px 4px 5px; text-align:center; } body div#devskin7405315 .thumb-default .shadow-holder .shadow a.thumb img { position:static !important; max-width:100%; vertical-align:baseline; } body div#devskin7405315 .thumb-default .shadow-holder .shadow a.thumb.lit { background:url('https://dl.dropboxusercontent.com/u/22307794/css/tricks/thumb-lit-bg.png') repeat-x; border:1px solid #FFFFFF; box-shadow:#c1c1c1 0px 1px 2px; -moz-box-shadow:#c1c1c1 0px 1px 2px; -webkit-box-shadow:#c1c1c1 0px 1px 2px; color:#222222 !important; display:inline-block; height:125px; margin:auto; overflow:hidden; position:relative !important; text-align:left; text-decoration:none !important; width:150px; } body div#devskin7405315 .thumb-default .shadow-holder .shadow a.thumb.lit img.lit { left:0 !important; position:absolute !important; top:0 !important; max-width:100%; vertical-align:baseline; } body div#devskin7405315 .thumb-default .shadow-holder .shadow a.lit img.journal { margin:4px 0 0 4px; } body div#devskin7405315 .thumb-default .shadow-holder .shadow a.thumb.lit wrap { display:block; } body div#devskin7405315 .thumb-default .shadow-holder .shadow a.thumb.lit .wrap q { cursor:pointer; font-family:Verdana; font-size:12px; left:26px; line-height:1.2em; min-height:0; padding-top:3px; position:absolute; right:4px; top:0; } body div#devskin7405315 .thumb-default .shadow-holder .shadow a.thumb.lit .wrap q strong:first-child { display:block; padding-bottom:6px; } body div#devskin7405315 .thumb-default .shadow-holder .shadow a.thumb.lit img:hover { opacity:1; filter:alpha(opacity=100); _zoom:1; } body div#devskin7405315 .thumb-styled .shadow-holder, body div#devskin7405315 .thumb-styled a.embedded-deviation { background:deepskyblue; border:1px solid powderblue; box-shadow:0px 1px 4px #526166; -moz-box-shadow:0px 1px 4px #526166; -webkit-box-shadow:0px 1px 4px #526166; margin:10px; padding:5px; vertical-align:middle; transition:all 0s; -moz-transition:all 0s; -webkit-transition:all 0s; -ms-transition:all 0s; -o-transition:all 0s; } body div#devskin7405315 .thumb-styled .shadow-holder .shadow { } body div#devskin7405315 .thumb-styled .shadow-holder .shadow a.thumb { } body div#devskin7405315 .thumb-styled .shadow-holder .shadow a.thumb img, body div#devskin7405315 .thumb-styled a.embedded-deviation img { vertical-align:middle; } body div#devskin7405315 .thumb-styled .shadow-holder:hover, body div#devskin7405315 .thumb-styled a.embedded-deviation:hover { background:steelblue; border:1px solid steelblue; box-shadow:0px 1px 8px #526166; -moz-box-shadow:0px 1px 8px #526166; -webkit-box-shadow:0px 1px 8px #526166; } body div#devskin7405315 .thumb-styled .shadow-holder .shadow a.thumb.lit { height:150px; width:200px; margin:-5px; } body div#devskin7405315 .thumb-styled .shadow-holder .shadow a.thumb.lit img { display:none; } body div#devskin7405315 .thumb-styled .shadow-holder .shadow a.thumb.lit .wrap { } body div#devskin7405315 .thumb-styled .shadow-holder .shadow a.thumb.lit .wrap q { color:#FFFFFF; font-family:Lato; font-size:13px; line-height:15px; margin:0; padding:5px; position:absolute; right:0; left:0; } body div#devskin7405315 .thumb-styled .shadow-holder .shadow a.thumb.lit .wrap q strong:first-child { display:block; background:powderblue; color:white; font-size:16px; line-height:20px; margin:-5px; padding:5px; margin-bottom:10px; } body div#devskin7405315 .thumb-styled .shadow-holder:hover .shadow a.thumb.lit .wrap q strong:first-child { background:steelblue; } /* -- Issues with sta.sh writer and preview -- */ body div#devskin7405315 .title-issue, body div#devskin7405315 .title-solved { background:white; margin:0 40px; padding-bottom:1px; } body div#devskin7405315 .title-issue .text, body div#devskin7405315 .title-solved .text { margin:40px; padding:0px; } body div#devskin7405315 .title-issue .title { margin:0; padding:0; position:relative; } body div#devskin7405315 .title-issue .title::before { display:block; content:'80px'; color:blue; border-bottom:1px solid; width:80px; text-shadow:none; position:absolute; top:40px; text-align:center; opacity:0.1; filter:alpha(opacity=10); _zoom:1; } body div#devskin7405315 .title-issue .title:hover::before { opacity:1; filter:alpha(opacity=100); _zoom:1; } body div#devskin7405315 .title-issue .title h2, body div#devskin7405315 .title-issue .title h2 a { background:url('https://fc07.deviantart.net/fs70/f/2015/044/4/c/swirl_pattern_edit_by_pica_ae-d8ht7p7.png'); color:teal; font-family:'Abril Fatface', cursive; font-size:24px; margin:0; padding:40px!important; text-shadow:dimgrey 0px 1px 0px; text-transform:uppercase; } body div#devskin7405315 .title-issue .title h2 a:hover { color:royalblue; } body div#devskin7405315 .title-solved .title h2 { background:url('https://fc07.deviantart.net/fs70/f/2015/044/4/c/swirl_pattern_edit_by_pica_ae-d8ht7p7.png'); padding:40px!important; } body div#devskin7405315 .title-solved .title h2, body div#devskin7405315 .title-solved .title h2 a { color:teal; font-family:'Abril Fatface', cursive; font-size:24px; text-shadow:dimgrey 0px 1px 0px; text-transform:uppercase; } body div#devskin7405315 .title-solved .title h2 a:hover { color:royalblue; } body div#devskin7405315 .title-solved .title { position:relative; } body div#devskin7405315 .title-solved .title::before { display:block; content:'40px'; color:blue; border-bottom:1px solid; width:40px; text-shadow:none; position:absolute; top:40px; text-align:center; opacity:0.1; filter:alpha(opacity=10); _zoom:1; } body div#devskin7405315 .title-solved .title:hover::before { opacity:1; filter:alpha(opacity=100); _zoom:1; } /* -- what is CSS and HTML anyway? -- */ body div#devskin7405315 .basics1, body div#devskin7405315 .basics2 { background:ivory; font-family:Roboto, Sans-serif; font-size:13px; margin:0; padding:20px; line-height:15px!important; text-shadow:none; } body div#devskin7405315 .basics1 h1, body div#devskin7405315 .basics1 h3, body div#devskin7405315 .basics2 h1, body div#devskin7405315 .basics2 h3 { color:crimson; font-family:Roboto, Sans-serif; } body div#devskin7405315 .basics h1 { font-size:24px; } body div#devskin7405315 .basics1 p, body div#devskin7405315 .basics2 p { color:dimgrey; } body div#devskin7405315 .basics1 h3, body div#devskin7405315 .basics2 h3 { color:limegreen; font-size:18px; margin-top:15px; } body div#devskin7405315 .basics2 .box { background:grey; margin-top:20px; padding:20px; } body div#devskin7405315 .basics2 .box h3 { color:deepskyblue; margin-top:0px; } body div#devskin7405315 .basics2 .box p { color:white; }

No, this is not about a tv show in which I take a CSS and make it prettier
It is about the pseudo-elements ::before and ::after.

They are similiar for example to the :hover element, meaning that it is not necessary (or possible) to add them to the HTML, but can be controlled purely by writing CSS. They are always there, but whether they are visible depends on whether you code them or not.

::before and ::after are almost self-explanatory pseudo-elements. They define what happens either before or after a regular HTML element. They can be applied to any element.

Let's get right going!
So in the first simple example we are going to add guillemets , also known as French quotation marks, to direct speech in our text. The usefulness of this may stand to debate, you could easily just type it out, but it is a nice and easy way to get started with explaining ::before and ::after.

We will take advantage of the i HTML class for this. Opposed to em it will not add emphasizis to the content, but an indication of different semantic meaning to the rest of the text; direct speech is what we are aiming for.

Lorem ipsum. he said. Lorem ipsum!

Lorem ipsum. he said. Lorem ipsum!


Because i renders text in italics, I will change the font-style to normal. Below that you can see content being added to the :before and :.after elements. You only require one line, which tells what to render, in this case guillemets before and after the direct speech. They will use the same font and text settings as the containing box, unless we specify new ones.

i {

font-style: normal;


}

i::before {

content: "«";


}

i::after {

content: "»";


}

Lorem ipsum.

he said.

Lorem ipsum!


The guillemets may not display on your browser, they sometimes do on mine, sometimes they don't. I cannot use the ASCII code for them either, dA does not validate the skin if I do that.



This is the most basic way of using the ::before and ::after to your advantage. The content can be any written content or nothing.
By not adding any other styling except for the content, the text inside the content will be styled the same way as the text in the element it refers to; In our example i.

If you do not add the line content: " ";, nothing will be displayed!



But we can do far more with these two pseudo-elements as they can be styled with all possible properties.

Practical Usage
There are many ways in which you can use the ::before and ::after elements to your advantage.

  • Indicators on links, f.e. here on dA you will find username icons [ pica-ae ] and external links [ google.com ] are using the ::after element.
  • To add appearence or content to HTML elements you can only edit via CSS. This is the case for most Content Managment System based websites, on dA it means: if you are using someone else's HTML (like when creating a journal skin on dA) you cannot add HTML elements like to the title of the journal.


Application of ::before and ::after

Here are some examples of how to use these pseudo-elements in your designs.

Using images in ::before and ::after
The scenario in the first example is a short paragraph with a headline. You may want to add images to the headline to highlight it further than just with a bigger font size.

Sed ut perspiciatis unde omnis


Iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

So this is how the HTML for our content could look like. I added the regular text just for demonstration purposes, we won't do anything with it.

The CSS may seem a bit more complex at first, but it can be broken down into bits that will all come together as being really simple.

The

element will be blue, bold and bigger than the copy. What we want is two different images to be displayed before and after the headline.

One way of solving this issue is by using the ::before and ::after pseudo-elements.

h1 {

color: #2864ff ;


font-size: 18px;


font-weight: bold;


}

h1::before {

content: " ";


display: inline-block;


background: url("…/img_before.png");


height: 20px;


width: 12px;


margin: 0 0 -3px 4px;


}

h1::after {

content: " ";


display: inline-block;


background: url("…/img_after.png");


height: 20px;


width: 12px;


margin: 0 4px -3px 0;


}


And as easy as that, we have two cats facing away from our headline on each side!

Sed ut perspiciatis unde omnis.
Iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.



Here's why I did what I did:

content
This has to be set to at least " ". Without that line, nothing will appear, no matter what else you write. Yes, I am repeating this. I have forgotten it often enough and got mad not realizing what was wrong.

display
In order to actually see the element, if it has no content, you will also have to tell it to be visible. I am going for inline-block, because it creates a block element BUT it does not create a whole width element.
If I was to use block, I would also have to use floats to place the element and I want to save that line of code.

height & width
They are needed to display the element as well. If they are not set, they are assumed to both be 0. It is best to set them to the exact dimensions of your image.

margin
Vertical margin is applied to position our cats better according to the text. The surface the cats are sitting on was supposed to be at the same height as the baseline of the text. This may require some adjustments and testing out.
Horizontal margin is applied on one side only, to create a better spacing between cat and headline.



Bullet points
If you have ever wanted to change the color of a bullet point in a list, but not the color of the font, the first thing to do is go to change the bullet to an image. The problem with that is, if you decided you need the bullet in a different color, you have to change the image and the image URL. Ugh, that's annoying

  • Glomtom
  • Aferraron
  • They name the ship Titanic. Charlie left the door open. We called her "the careless car mechanic". They found the box empty. Those taxi drivers appointed him committee chairman.

Read up on lists in my CSS Tricks: Lists article.

First thing we do is disable the default bullet points for an undordered list. I am not doing this on the list element, because I may want to display the type for ordered lists still in my CSS.

I do not have to add any CSS to the list elements, they stay default.

The ::before element will now become our bullet point replacement. We can apply any styling we want to this, and it will not be applied to the list element's text.

There is a bit of math required for all the positioning, but it's not that bad

ul {

list-style-type: none;


margin-left: 14px;


}

ul li::before {

content: " ";


display: block;


float: left;


background: #2864ff ;


height: 8px;


width: 8px;


margin: 6px 6px 0 -14px;


}


  • Glomtom
  • Aferraron
  • They name the ship Titanic. Charlie left the door open. We called her "the careless car mechanic". They found the box empty. Those taxi drivers appointed him committee chairman.



list-style-type: none;
This line gets rid of the bullet points. The default bullet would be a filled circle in the color of the list element's text.

margin-left
Here is where the math starts. The values you use here, depend on the values you apply to the bullet point itself. In this case the value comes from the addition of width and margin-right: 8px + 6px = 14px.

content
Again, content: " "; is necessary to display the ::before or ::after pseudo-element.

display
For this example I am using display: block;, to demonstrate the different effects of using different values for display.

float
Because we have used display: block;, we need to use float: left; to position the bullet points before the list element, yet allowing it to be "inline" with it.

margin
The margin helps further position the bullet point's ::before element. In the example I have applied it top and to right of the element.
You may have to adjust the margin-top depending on the size of the bullet point; margin-right is more a question of preference, as to how far away the text should be from the bullet point.
To make up for the margin-left we applied to the li element we have to add margin-left: -14px; to the ::before element if we want everything to be aligned nicely. (Which is the whole purpose of all this margin-left stuff we're doing here.)



The famous arrow & and hover effects
This is a small weak point of mine, that I like to pursue a lot It is a bit more advanced, as it not only uses ::before and ::after but the appearance actually depends on border values; we merely use ::before and ::after for where we want it to be

You'll also see how to code :hover behaviour on elements using ::before and ::after. It is not harder than any other hover, just needs the proper syntax. (Which tbh can be a mind bender sometimes )

I will create a custom button class without styling and add the link inside the button div. This I do to seperate between regular links in texts and links in buttons.

I am a button with an arrow end!


The simplicity of the HTML unfortunatley is not reflected in the CSS

.button a {

background: #2864FF ;


color: #FFFFFF ;


display: inline-block;


height: 40px;


line-height: 40px;


padding: 0 10px 0 10px;


position: relative;


}

.button a::after {

content: " ";


background: transparent;


border-top: solid transparent 20px;


border-right: none;


border-bottom: solid transparent 20px;


border-left: solid #2864FF 20px;


position: absolute;


right: -20px;


}

.button a:hover {

background: #183d99 ;


}

.button a:hover::after {

border-left: solid #183d99 20px;


}

I am a button with an arrow end!



link display
display: inline-block; will make our element only as long as its content, plus margins and other horizontal elements. block would make the element full width, and we don't want that right now. Not styling this will cause our set height not to render.

link height, line-height & padding
In order to have clean results, we need to set a fixed height for our element. Applying a line-height of the same value as the height will help us center the text vertically.
Since we have a fixed height with a new line-height, we only have to set padding to the right and left of our element.

link position
Applying position: relative; here, will make it possible to position the ::after element absolute later in the CSS.

::after content
Again, again, content: " "; is necessary to display the ::after pseudo-element.

::after borders
It may come as a surprise that we can use borders to create arrow shapes But the way borders are set up makes this possible.
If you ever looked closely at a picture frame, you will have noticed how for the corners the seperate pieces of wood are cut at a 45° angle. The same thing is going on with borders in CSS. Now if you now imagine a frame that has no content, the seperate pieces of wood become basically just 4 triangles whose tips meet in the middle.
What we have to do in CSS to make this work is quite simple: The border we want to be the pointy bit has to have a border-color, while those who are on each side of our pointy site have to have a transparent border-color. The fourth side we don't need to touch, if we don't define it, it simply won't show. (I have set it to none in the given example, just to cover everything.)
All "visible" borders need to be solid and not bigger than half the height of our element; in this case they are 20px wide, half of our element's height: 40px;.
Because it is possible to set a border-color to transparent, we can create the pointy shape we want.

::after position
We are using position: absolute; to place the ::after element exactly where we need it. It will by placed right: -20px;, outside of our link. The value is the negative version of our pointy border-width we used before.

:hover
As a hover effect we will only change the background of the button link. For a, we will do it normally, simply adding on to the end of our selector .button a:hover.
In order to change the border-color of our arrow, we stick the ::after behind the regular hover: .button a:hover::after.
As normally, we only write the values we want to change, the background-color of the link and only the styling of the border for border-left.



Disclaimer: I did not come up with the idea to create arrows this way. But I can't remember where I read it for the first time. But considering the history of CSS, this method of creating arrow shapes is around for ages already. Longer than ::before and ::after I am sure.

Conclusion

  • ::before and ::after are always avaiable for all elements and do not require HTML code to be written.
  • When using ::before and ::after it is necessary to always add content: " "; declaration or it will not show.
  • The ::before and ::after pseudo-elements can display text, images or shapes; basically anything that can be created with CSS.


Do not hesitate to ask me questions if you don't understand anything or want clarification

Happy creating

Have a suggestion?
Let me know in a comment or a note. I'd love to hear what you want to know and learn. With your input and suggestions this series can continue and grow.


Previous CSS Tricks
Limiting .text width Responsive dA? Background Images Article Layout Fonts and Text Basics Lists ::before and ::after Journal Breakdown Deviations in Journals

Related content

pica-ae - Happy Holidays!

[ TEXT ]


pica-ae - CSS Tricks: Journal title styling issue

pica-ae - My dA Transit Map [DD]

pica-ae - Simple Moleskine Skin

pica-ae - Moleskine Icons

pica-ae - Paperbag Icons

pica-ae - Hot Chocolate Journal Skin

pica-ae - Advanced Moleskine Skin

pica-ae - Don't Panic Skin

pica-ae - Red Moleskine Icons

pica-ae - Creepy Neighbourhood [DD]
Comments: 45

SquidCannonArmed [2019-05-08 23:41:50 +0000 UTC]

Shame we cannot use filter property here on DA Would have been nice to do some animation stuff aswell.

👍: 0 ⏩: 0

TopHat-Queen [2015-08-27 17:53:11 +0000 UTC]

The content glitches when you have ::after and ::before in the yellow space; it's covering up the 'the'.

👍: 0 ⏩: 1

pica-ae In reply to TopHat-Queen [2016-05-03 12:05:27 +0000 UTC]

Oh I see... I need to fix that! Thanks for spotting it  

👍: 0 ⏩: 1

TopHat-Queen In reply to pica-ae [2016-05-03 12:43:58 +0000 UTC]

Sure c:

👍: 0 ⏩: 0

lauraypablo [2015-02-21 23:18:46 +0000 UTC]

thank you so much for all your tricks

👍: 0 ⏩: 1

pica-ae In reply to lauraypablo [2015-02-23 12:25:42 +0000 UTC]

I am just glad they are helpful  Thank you!  

👍: 0 ⏩: 0

MurPloxy [2015-01-10 22:59:26 +0000 UTC]

Are there any list of Div Classes in Deviantart? Cuz customizing the Custom box is totally harder than the Journal.

👍: 0 ⏩: 1

pica-ae In reply to MurPloxy [2015-01-11 12:12:10 +0000 UTC]

You should check out CustomizeYourProfile . They have galleries full of tutorials on custom boxes  
There is no official list, I've also been collecting information from various of their resources It's a bit trickier, cos as opposed to skins, styling custom boxes is actually a bug that's accepted by DA, so it's not as easy  

👍: 0 ⏩: 1

MurPloxy In reply to pica-ae [2015-01-11 15:21:41 +0000 UTC]

awww. well that's why.

I only need some specific class that will position my div on the left side of the box...cuz im putting another div just beside it. The problem is , is that my code centers the div on the custom box. And when i try to attach another div, it goes on the bottom of it.

Srsly they need to list these things up XD

👍: 0 ⏩: 1

pica-ae In reply to MurPloxy [2015-01-12 14:04:39 +0000 UTC]

Yeah, so most resources are just "work-arounds" really

Maybe this can help you with the problem: Fun with Columns  . It gives some code for div-elements that can appear side by side.
By default div-elements always take up a whole line, unless specifically coded to not do that. So if you put two divs into the same line, that work the default way, there will be a line break after the first div.

👍: 0 ⏩: 1

MurPloxy In reply to pica-ae [2015-01-12 22:21:08 +0000 UTC]

NOICE! this will work well for my 3rd custom box(which i've been working on for a while XD). I wonder if i can make 3 of those columns

Hope this works well on mobile. Cuz i found a way how to solve this, but when i looked at my mobile...oh god, what a mess.

👍: 0 ⏩: 1

pica-ae In reply to MurPloxy [2015-01-13 12:14:12 +0000 UTC]

I think any code that changes the width of the widget's content, will not display properly on mobile browser. 
Actually I just noticed that some code must have changed, cos some of my own boxes are displayed weirdly now That's the problem with widgets, since coding them is only an accepted bug by DA, they may change a class's styling in the CSS and then a widget code may not work anymore.

👍: 0 ⏩: 1

MurPloxy In reply to pica-ae [2015-01-13 13:29:33 +0000 UTC]

Somehow, from the moment of the first converse line, This is slowly making sense for me XD

now you're saying that coding the widgets are hella buggy. Makes sense why i have to do some kind of  Mano-a-mano with it all the time.

👍: 0 ⏩: 1

pica-ae In reply to MurPloxy [2015-01-13 16:03:09 +0000 UTC]

It took me ages to understand all that stuff about coding profile widgets Cos it's stealing code that exists and it may be more complex or weird than you would do it yourself.

The thing is just that any code used in widgets is just using some code from DA. And that code is not "safe", it may change at any time, because it's not intended to be used in widgets the way we use it. So, a lot of the deviations and tutorials may not work anymore, because the underlying CSS/HTML was changed by DA. 

👍: 0 ⏩: 1

MurPloxy In reply to pica-ae [2015-01-13 20:23:14 +0000 UTC]

PShh, I AM LEARNING SO MUCH FROM YOU. 

talk about stealing the code, Google Chrome is my best Friend XD

👍: 0 ⏩: 1

pica-ae In reply to MurPloxy [2015-01-14 09:20:06 +0000 UTC]

 

Oh yes, inspect element is the best  

👍: 0 ⏩: 1

MurPloxy In reply to pica-ae [2015-01-14 22:56:55 +0000 UTC]

All i need to do is to know which guys have a sexy-looking web page and BAM! Inspect that shiZ!

👍: 0 ⏩: 1

pica-ae In reply to MurPloxy [2015-01-15 15:45:55 +0000 UTC]

Indeed. The option to live edit is also nice, especially when trying to help people find an error in code  

👍: 0 ⏩: 1

MurPloxy In reply to pica-ae [2015-01-16 01:36:20 +0000 UTC]

Google chrome is now the king of browsers for me because of this XD

👍: 0 ⏩: 0

ptrckr [2014-07-21 09:59:23 +0000 UTC]

Super awesome, huge respect for all the work you did there.

Just two things that you surely already knew but content can be empty and does not have to contain a space, and also not all browsers are supporting the :: syntax right? dA dropped support for older browsers so it shouldn't matter here, just in case someone is using it for anything else then dA.

👍: 0 ⏩: 1

pica-ae In reply to ptrckr [2014-07-21 12:25:24 +0000 UTC]

Thank you

I never managed to make it work with nothing between the quotation marks, but sometimes I used the wrong quotation marks, so who knows … actually they are not really quotation marks, typographically speaking. Not the German ones anyway, different story some fucked up thing they did with keyboards

For Firefox and Chrome it's pretty much safe, IE is as always a problem, but it does after IE9. I could add as a tip that you can do both by a comma in the same rule. 

Well, it's not like DA doesn't work at all on older browsers. They tell you to upgrade and that some things won't work, but the main functions remain. And the browsers not supported by DA anymore are the same ones most other websites don't offer support for, either. I've got my old Mac and I have the warning on pretty much every site I visit  

But it's a good hint either way, I always tend to ignore support on different browsers

👍: 0 ⏩: 1

ptrckr In reply to pica-ae [2014-07-22 19:00:14 +0000 UTC]

You're welcome.

Really? It worked for me every time. I'm just using the same quotation marks as always while coding. «'» and «"».
Yeah, those punctuation is some serious business, especially those dashes. /facepalm I've been using the wrong ones all the time.

That would work, yes. :'D I also think the new syntax with the double colon looks way nicer. :'B

Some website do have some really awesome messages which tell you to upgrade.
What old mac do you have, I'm curious? :'D

c: 

👍: 0 ⏩: 1

pica-ae In reply to ptrckr [2014-07-30 11:23:39 +0000 UTC]

Might be some time ago, since that made issues. Haven't tried it with „German“ ones yet

In the editor the colon and semicolon look so similar, I spent so much time getting mad at something not working, only to find out I made a typo

That is the old old one again, since the new one broke, so it's about 8 years old or something. PowerPC G5 (I think) without Intel chip, so my OS is 5 years old or something BUT a new PS is on its way  (omg windows )

👍: 0 ⏩: 1

ptrckr In reply to pica-ae [2014-07-31 19:12:03 +0000 UTC]

Haha, yes. That happens to me also from time to time.

Nice. :'D
PS? Power Station or do you mean PC?

Eeeek, Windows.

👍: 0 ⏩: 1

pica-ae In reply to ptrckr [2014-08-01 07:19:45 +0000 UTC]

PC and PS actually  

Yeah, I let myself get talked into it, cos money  

👍: 0 ⏩: 1

ptrckr In reply to pica-ae [2014-08-01 15:13:39 +0000 UTC]

PS for Photoshop, right? :'D

Ugh, money.
Have Fun with your new machine then.

👍: 0 ⏩: 1

pica-ae In reply to ptrckr [2014-08-06 11:25:27 +0000 UTC]

yes

I am sure I will have fun  

👍: 0 ⏩: 0

TarynNefdt [2014-05-14 08:57:20 +0000 UTC]

Well done. I love this series. I would really love you to do a CSS Tutorial on Vertical Navigation and Horizontal Navigation Menu Bars as well - if you don't mind

👍: 0 ⏩: 1

pica-ae In reply to TarynNefdt [2014-05-14 09:52:00 +0000 UTC]

Thank you

I've sort of covered the horizontal menu in the previous tutorial fav.me/d6ub7t1 about lists, but I could do something about those two in special. Thanks for the idea!  
I could reuse some of that, and add the vertical menu  
Did you mean in general on in regards to installable journal skins on dA? Because the one's on dA may require a slightly different approach as we are applying a CSS to an existing layout. 

👍: 0 ⏩: 1

TarynNefdt In reply to pica-ae [2014-05-14 09:54:40 +0000 UTC]

I mean in general since I have a website design project that I'm doing and would love some pointers on horizontal navigation and vertical navigation.

👍: 0 ⏩: 1

pica-ae In reply to TarynNefdt [2014-05-14 10:09:05 +0000 UTC]

Ah okay. I don't know when I will have the time to make the tutorial, I am currently working on another on another topic already, so it may not be soon :/ 

However you should check out CSS-Tricks  for some pointers, they are always very helpful to me. I also use CSS reference - CSS | MDN  a lot
I've recently come across Efficiently Simplifying Navigation, Part 2: Navigation Systems | Smashing Magazine  and it has some nice information on the topic  

👍: 0 ⏩: 1

TarynNefdt In reply to pica-ae [2014-05-14 12:46:35 +0000 UTC]

Thank you, for the links

👍: 0 ⏩: 1

pica-ae In reply to TarynNefdt [2014-05-14 13:01:28 +0000 UTC]

No problem

👍: 0 ⏩: 0

SimplySilent [2014-05-07 20:55:31 +0000 UTC]

Oh yes, I'm a sucker for arrows. I usually use them to make the little triangle for tooltips.

👍: 0 ⏩: 1

pica-ae In reply to SimplySilent [2014-05-08 11:25:28 +0000 UTC]

Haha yeah, I sometimes feel like I'm using them too much I've used them for quotes, to make them look like speech bubbles

👍: 0 ⏩: 0

Ikue [2014-05-07 14:08:38 +0000 UTC]

👍: 0 ⏩: 1

pica-ae In reply to Ikue [2014-05-08 07:43:37 +0000 UTC]

 

👍: 0 ⏩: 0

eMaGFX [2014-05-07 12:22:43 +0000 UTC]

Awesome !!! Keep it up ! 

👍: 0 ⏩: 1

pica-ae In reply to eMaGFX [2014-05-07 16:06:00 +0000 UTC]

Thank you  

👍: 0 ⏩: 0

gillianivyart [2014-05-07 12:11:31 +0000 UTC]

 You know, I would usually fill my content:" " with nonsense and hide the text by making font size 0 or color transparent or something.  lols.  I don't think I ever just left them blank!  

👍: 0 ⏩: 1

pica-ae In reply to gillianivyart [2014-05-07 16:05:52 +0000 UTC]

that is genius I may do that in the future But I wouldn't teach such behaviour  

👍: 0 ⏩: 1

gillianivyart In reply to pica-ae [2014-05-07 23:48:03 +0000 UTC]

It might be a funny surprise in there for any possible code thieves.    You can add your copyright or a good telling off.

👍: 0 ⏩: 1

pica-ae In reply to gillianivyart [2014-05-25 17:58:40 +0000 UTC]

 

👍: 0 ⏩: 0

GinkgoWerkstatt [2014-05-07 08:12:21 +0000 UTC]

All the fancyness!

👍: 0 ⏩: 1

pica-ae In reply to GinkgoWerkstatt [2014-05-08 11:24:49 +0000 UTC]

  Indeed!

👍: 0 ⏩: 0