SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2011
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    block / border-bottom only on text

    Hello,

    Quite a typical case of useless <span> I'm sure:
    Code:
    <p class="block">
    Some text
    </p>
    Code:
    .block {
    border-bottom: 3px solid white;
    }
    The whole width of the <p> is underlined, not just the string it contains. How can I avoid <span>s?


  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The easiest and most semantic way to underline text is to use text-decoration with a set font color as using <span> elements is quite redundant.

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add display:inline to the block class.

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2011
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But I want it to display as a block.

  5. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by rhgiant View Post
    But I want it to display as a block.
    Then you'll either have to use a <span> or underline it ... of those two, a <span> would generally be a better option.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Then you'll either have to use a <span> or underline it ... of those two, a <span> would generally be a better option.
    Exactly. I guess as a last resort scenario you *could* apply a background image that has the "border" on it, although there really shouldn't be a reason why the two options Steve mentioned shouldn't work.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,796
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    it really depends as to WHY you need this to be a block element.
    if its because of giving explicit dimensions, display:inline-block ; might do what you want.

    If you just simply want a line break this might suit your needs:
    .block {
    border-bottom: 3px solid white;
    display:inline;
    }
    .block:after, .block:before{ content:"\D\A"; }


Bookmarks

Posting Permissions

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