example css :first-line and :first-letter

example css :first-line and :first-letter

by Adi Jaya

HTML

<h2>Example 1</h2>
<div class="post-body entry-content">
Lorem ipsum dolor sit amet, at vix alia aliquando expetendis. Nam dicta quodsi adolescens in. Omnes minimum facilisis cum at, per scaevola deseruisse in. Autem facete fierent no duo. Est audiam admodum definiebas ei, vidisse gubergren constituto id qui, vel ne doctus maluisset. Tractatos consequat et vis, ut lucilius pertinacia quo.
<br/>
Munere consulatu reformidans ius an, et indoctum sententiae argumentum sea. No hendrerit accommodare quo. Per vivendum omittantur an, sea id labores meliore moderatius. Per ex solum soluta accusam. Usu an etiam latine perpetua, eu vix iisque prodesset moderatius.
</div>



<article id="article">
<h2>Example 2</h2>
<p>
Diam graece in cum, detraxit vulputate est no. Per ei semper legendos. Liber tincidunt deterruisset et vim, mel noster facete mediocritatem ne, qui adhuc semper propriae ei. Per inani vulputate in, ne pro suscipit torquatos, tollit antiopam philosophia te his. In falli accusam vis, ei etiam partiendo cum, discere officiis moderatius cu pri.
</p>

<p>
Ullum concludaturque id duo, ridens semper oporteat sea te, vis eu gloriatur theophrastus. Et his velit dolorem. Has ludus impedit assentior ne. Vis solet tacimates recteque ei, usu novum clita reprehendunt no, saperet dolorum has id. Qui at falli iusto reprimique, commune aliquando eam ad. Mel eros appetere no, ne cum aliquam debitis argumentum.
</p>

<p>
Ea aliquip inermis liberavisse mel, has primis placerat at, debet accusata ei ius. Illum liber id est, sit omnis perfecto quaerendum no, cum tamquam adversarium ei. Vix atomorum voluptaria cu. In eos posse iuvaret, has ea dicam populo comprehensam.
</p>
</article>




<h2 class="tes">Example 3</h2>



<h2>Example 4</h2>
<blockquote class="blockquote">
Ea aliquip inermis liberavisse mel, has primis placerat at, debet accusata ei ius. Illum liber id est, sit omnis perfecto quaerendum no, cum tamquam adversarium ei. Vix atomorum voluptaria cu. In eos posse...

CSS

body {
    font-family: "arial", verdana;
    font-size: 13px;
    line-height: 1.7em;
    overflow-x: hidden;
}
/*Example 1*/
.post-body:first-line {
    color: #25a186;
}
.post-body:first-letter {
    font-size: 56px;
    float: left;
    margin-right: 14px;
    line-height: 1;
    font-weight: 600;
}

/*Example 2*/
#article p:nth-of-type(2):first-line {
    color: #ff8159;
}
#article p:nth-of-type(2):first-letter {
    font-size: 56px;
    float: left;
    margin-right: 14px;
    line-height: 1;
    font-weight: 600;
}
/*Example 3*/
h2.tes:first-letter {
    color: red;
    font-size: 30px;
    float: none;
    margin: 0;
    line-height: normal;
    font-weight: 600;    
}

/*Example 4*/
blockquote.blockquote:first-line {
    color: purple;
}
blockquote.blockquote:first-letter {
    font-size: 76px;
    float: left;
    margin-right: 10px;
    line-height: 1;
    font-weight: 600;
}

/*Example 5*/
pre.pre:first-letter {
    color: blue;
    font-size: 76px;
    float: left;
    margin-right: 10px;
    line-height: 1;
    font-weight: 600;
}

JavaScript

/*
:first-line Browser compatibility
https://developer.mozilla.org/id/docs/Web/CSS/::first-line#Browser_compatibility

:first-letter Browser compatibility
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter#Browser_compatibility

*/