Results 1 to 3 of 3

Thread: Text Bottom Border

Hybrid View

  1. #1
    Join Date
    Oct 2012

    Text Bottom Border

    Hi guys. Im trying to code this simple text with border but i'm not that good and ...


    I'm trying to get text with 1-2px bottom border but when i try i get border on a full page .

    I will be happy if someone help me.Thx.

  2. #2
    Join Date
    Sep 2008
    border-bottom: 1px solid #000;
    Apply that to whatever element you need. Also, change the color/size/style as needed.

  3. #3
    Join Date
    Aug 2012
    To expand on Javaboey's answer so you may be able to understand a bit better, if the text in question is a paragraph, in your stylesheet you would just add some style to paragraphs with a certain class (the colour needs to be amended to the hex colour you need)
    p.white-underline {
      border-bottom: 1px solid #FFFFFF;
    In your HTML:
    HTML Code:
    <p class="white-underline">I am a line of text</p>
    However, if you want to just add a border to a word (or several words) in a paragraph of text then you would set up a class
    .white-underline {
      border-bottom: 1px solid #FFFFFF;
    And then in your HTML wrap a span around each word you want to have the border applied to:
    HTML Code:
    <p>I am a <span class="white-underline">line</span> of <span class="white-underline">text</span></p>
    Also, with using just a class you can apply it to any element in your HTML, so maybe you have an un-ordered list and you want one of the list items to be underlined:
    HTML Code:
      <li>Item 1</li>
      <li class="white-underline">Item 2</li>
      <li>Item 3</li>
    I hope this helps clarify things for you.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center

Recent Articles