DEV Community

Cover image for Day 2: hover, underline, list-disc, and px-*
Daniel Feldroy for Feldroy

Posted on

Day 2: hover, underline, list-disc, and px-*

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Gave me this result:

Alt Text

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:

Alt Text

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:

Alt Text

And the code for the list:

<ul class="list-disc px-6">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>    
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Here is today's code on glitch.

Top comments (0)