~uglyduck/uglyduck.srht.site: _site/first-letter/index.html - sourcehut git


                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">

  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>
    
      First Letter Pseudo Element &middot; Ugly Duck
    
  </title>
  <meta name="description" content="Set specific styling for the first letter of a text element with CSS">
  <link rel="shortcut icon" href="/favicon.png">
  <link rel="alternate" type="application/atom+xml" title="Ugly Duck" href="/feed.xml">
  <link rel="stylesheet" href="/style.css">
</head>


  <body>
    <header role="banner">
    <hr>
<nav role="navigation">
    <a href="/">Home</a>
    <span>&middot;</span>
    <a href="/about">About</a>
    <span>&middot;</span>
    <a href="/projects">Projects</a>
    <span>&middot;</span>
    <a href="/articles">Articles</a>
    <span>&middot;</span>
    <a href="/uses">Things I Use</a>
    <span>&middot;</span>
    <a href="/privacy">Privacy</a>
    <span>&middot;</span>
    <a href="https://en.liberapay.com/uglyduck/">Support</a>
    <span>&middot;</span>
    <a href="/feed.xml">RSS</a>
</nav>
<hr>

</header>

    <main id="main" role="main">
      <header>
        <h1>First Letter Pseudo Element</h1>
      </header>
      <hr>
      <article class="single">
        <p><em>Posted on <time datetime="2019-05-02T20:00:00-04:00">May 2, 2019</time></em></p>
        <hr>
        <p><em>In today’s TypeTip™ we will be taking a look at the often overlooked</em> <code class="language-plaintext highlighter-rouge">:first-letter</code> CSS pseudo element. Though you might only use this for specific article-format web pages, it’s still a nice-to-have in your web dev toolset.</p>

<h2 id="the-html">The HTML</h2>

<p>Like most pseudo elements, nothing has to change with your pre-existing HTML structure:</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;article&gt;</span>
    <span class="nt">&lt;p&gt;</span>It was a bright cold day in April, and the clocks were striking thirteen.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/article&gt;</span>
</code></pre></div></div>

<h2 id="the-css">The CSS</h2>

<p>Here’s where the magic happens:</p>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">p</span><span class="nd">:first-letter</span> <span class="p">{</span>
    <span class="nl">color</span><span class="p">:</span> <span class="no">orangered</span><span class="p">;</span>
    <span class="nl">font-size</span><span class="p">:</span> <span class="m">250%</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>

<h2 id="live-codepen">Live CodePen</h2>

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="result" data-user="bradleytaunt" data-slug-hash="gJYbev" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="First Letter Pseudo Element">
  <span>See the Pen <a href="https://codepen.io/bradleytaunt/pen/gJYbev/">
  First Letter Pseudo Element</a> by Bradley Taunt (<a href="https://codepen.io/bradleytaunt">@bradleytaunt</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async="" src="https://static.codepen.io/assets/embed/ei.js"></script>


      </article>
      <br>
      <footer role="contentinfo" id="menu">
    <hr>
<nav role="navigation">
    <a href="/">Home</a>
    <span>&middot;</span>
    <a href="/about">About</a>
    <span>&middot;</span>
    <a href="/projects">Projects</a>
    <span>&middot;</span>
    <a href="/articles">Articles</a>
    <span>&middot;</span>
    <a href="/uses">Things I Use</a>
    <span>&middot;</span>
    <a href="/privacy">Privacy</a>
    <span>&middot;</span>
    <a href="https://en.liberapay.com/uglyduck/">Support</a>
    <span>&middot;</span>
    <a href="/feed.xml">RSS</a>
</nav>
<hr>

    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </small>
    <hr>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>
    
  </body>
</html>