www.webdeveloper.com
Results 1 to 3 of 3

Thread: Text Bottom Border

Hybrid View

  1. #1
    Join Date
    Oct 2012
    Posts
    2

    Text Bottom Border

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

    http://i45.tinypic.com/2dtu7ft.png

    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
    Location
    Dallas
    Posts
    154
    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
    Posts
    155
    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)
    Code:
    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
    Code:
    .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:
    <ul>
      <li>Item 1</li>
      <li class="white-underline">Item 2</li>
      <li>Item 3</li>
    </ul>
    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