Markierung mit Pseudoklasse

Pseudoklasse wird transformiert.

by Jens Grochtdreis

HTML

<div class="infocnt new">
    <h3>Basic Infos</h3>
<p>Auch gibt es niemanden, der den Schmerz an sich liebt, 
sucht oder wünscht, nur, weil er Schmerz ist, es sei 
denn, es kommt zu zufälligen Umständen, in denen Mühen 
und Schmerz ihm große Freude bereiten können. Um ein 
<strong>strong</strong> triviales Beispiel zu nehmen, 
wer von uns unterzieht sich je anstrengender körperlicher 
Betätigung, außer um Vorteile daraus zu ziehen? Aber 
<a class="external ext" href="#">link</a> wer hat irgend 
ein Recht, einen Menschen zu tadeln, der die Entscheidung 
trifft, eine Freude zu genießen, die keine unangenehmen 
Folgen hat, oder einen, der Schmerz vermeidet, welcher 
keine daraus resultierende Freude nach sich zieht?
</p>


</div>

CSS

.infocnt {background-color: #dedede;padding: 0.5em; margin: 5em 0 1em 0;border-left: 10px solid #fd8107;clear: both;}
    .infocnt h3 {margin: 0.25em;font-size: 1.25em;}
    .infocnt strong, a {color: #a20000;}

    .infocnt p {margin: 0.5em;line-height: 1.5;color: #000;}
    
    .infocnt ul {list-style-type: none;margin: 0;padding-left: 0;}
    .infocnt ul li {padding-left: 0.5em;margin-left: 0;list-style-type: none;}
    .infocnt li:before { content: "\279C"; margin-right: 1em; }
    
    .new {position: relative;border-left-color: #a20000;}
    .new:before {
        content: "NEW";
        overflow: hidden;
        position: absolute;
        top: 10px;
        right: -10px;
        background-color: #a20000;
        padding: 4px 10px;
        color: #fff;
        -webkit-transform: rotate(45deg);
        -moz-transform:    rotate(45deg);
        -ms-transform:     rotate(45deg);
        -o-transform:      rotate(45deg);
        transform:         rotate(45deg);    
    }

/* styling basics */
html {padding: 20px 0; background-color: #efefef;}
body {width: 80%; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif; font-size: 14px;}