I like it when links hovered over are underlined. I learned how to do this in Tailwind CSS today by adding hover:underline
to a
tags. Here's an example:
<a
class="text-blue-600 hover:underline"
href="https://dev.to/feldroy/day-2-hover-underline-list-disc-and-px-3apn">
Day 2: hover, underline, list-disc, and px-*
</a>
On my Glitch project, I'm organizing links to my dev.to posts like the one you're reading by putting them in an unordered list. To my surprise, using this code:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Gave me this result:
That almost works. I like my unordered lists to have bullets. The docs told me to use list-disc
in a class on the ul
element, so I did. And I got:
Hmmm... the bullets appear but they are at the edge of the containing div
. Then I remembered that Tailwind CSS makes it easy to adjust horizontal padding through the use of the px-*
classes. After a little experimentation, I settled on px-6
. This is how it looks now:
And the code for the list:
<ul class="list-disc px-6">
<li>Item 1</li>
<li>Item 2</li>
</ul>
Finally I put in my content:
<ul class="list-disc px-6">
<li>
<a
class="text-blue-600 hover:underline"
href="https://dev.to/feldroy/day-1-building-a-page-after-a-css-reset-1dif">
Day 1: Building a Page After a CSS Reset
</a>
</li>
<li>
<a class="text-blue-600 hover:underline"
href="https://dev.to/feldroy/day-2-hover-underline-list-disc-and-px-3apn">
Day 2: hover, underline, list-disc, and px-*
</a>
</li>
</ul>
Here is today's code on glitch.
Top comments (0)