Advanced CSS challenge: underline only the final line of text with CSS

custom underline css
text-decoration-style
css underline spacing
css underline thickness
text line css
text decoration underline alternative
border-bottom underline css
css blank underline

I want to underline the final line of multi-line text, or at least create the allusion of it. Look closely at the following examples, because I'm trying to do something tricky.

A. Here's what I want to happen (the __ marks the where the text should be underlined):

A line of text that is long enough so that it wraps
to another line.
________________

B. Here's what I DON'T want:

A line of text that is long enough so that it wraps
___________________________________________________
to another line.
________________

C. Or this:

A line of text that is long enough so that it wraps
to another line.
___________________________________________________

This effect is for a CMS so I won't know the precise length of text. This means that manually inserting <span>s or <u> tags are not an option. I also don't want to user javascript. I'm well aware that the effect I want is not the default behavior and that this will require some tricky CSS/HTML magic. But I feel like it might be possible. If you can't think of a way to do it, please don't bother to submitting an answer. Everything is impossible until you figure out how to do it.

Here's a variation on what @albert was doing. It uses the p:after{} trick but with different display. The <p> seems to have to be position:relative; to work.

<style>
p{position:relative; display:inline}
p:after{position:absolute; left:0; bottom:0; width:100%; height:1px; border-bottom:1px solid #000; content:""}
</style>
<p>first line of test text which is long enough to stretch onto a second line .</p>

http://jsfiddle.net/VHdyf/

One cool thing about this approach is that it still uses border-bottom, which I prefer to using underline in most cases.

Advanced CSS challenge: underline only the final l, I want to underline the final line of multi-line text, or at least create the allusion of it. Look closely at the following examples, because I'm trying to do something� We will be discussing just that in this article. text-underline-position and text-underline-offset are enhancing features to add on to the underline provided by the property text-decoration: underline. Syntax in Text Underline. 1. Text-underline-position: This property defines the position of the underline with respect to the text.

you can use css generated content to achieve the effect. i set up an example on jsfiddle, but essentially you add the border to p:after{}; in this example, the border stretches all the way across, which seems undesirable, however thats just because the parent container is vanilla for demos. i think it should be adaptable for your situation. here ya go: http://jsfiddle.net/jalbertbowdenii/bJ9D4/

Starting with HTML + CSS, I want to underline the final line of multi-line text, or at least create the allusion of it. Look closely at the following examples, because I'm trying to do something� There is no CSS for applying an underline (text-decoration: underline;) only to individual words in a multiple-word element. The best way would be to wrap each word in a span (not the spaces, just the words) in spans and apply underline to those spans. Here’s jQuery to do that to h1 elements.

.title {
  width: 700px;
  overflow: hidden;
}

.title:after {
  content: '';
  display: inline-block;
  vertical-align: bottom;
  height: 1px;
  box-shadow: -100vw 100vw 0 100vw;
}
<h1 class="title">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</h1>

Styling Underlines on the Web, It just explains how to create an HTML file, a CSS file and how to make them at the start indicates that this is more advanced material than the rest of the text. For this tutorial, I suggest you use only the very simplest of tools. The first line of the HTML file above tells the browser which type of HTML this The final result. I used the technique described in this answer: Advanced CSS challenge: underline only the final line of text with CSS I introduced a span into the H2 in order not to change the display attribute of it, but you could just as easily use the same technique with a display: inline on your H2.

Disclaimer: Chances are that this is not possible, but please consider this answer to be thinking out loud / suggestion of a place to start looking, than than working code.

Is there possibility of highlighting the lines of text (with a colour that matches the background colour) and then adjusting the line-height such that the background of the lower lines overlap the underline?

Pictures say a thousand words, so take a look at these:

Before:

After:

From these mock-ups you can see that there are a couple of caveats and do not match exactly what is being asked for, but perhaps this is a starting point..?

Chapter 24 Advanced UI, So what are all the different ways we can underline text on the web? Here are the This one works only on a single line of text though, so heads-up on that. Refresh the page and notice the difference in font styles! That’s how we add and use custom fonts. View code changes on GitHub > Notice the different variations of CSS that we’re using: form input to select input fields that are inside of a form, and form input[type=”submit”] to select input fields inside a form that have a type attribute set to ‘submit’ (this is the submit button

If this is the text "A line of text that is long enough so that it wraps to another line." and you want to underline "it wraps to another line." all you need is to use the selector.

For Html:

<div>
     A line of text that is long enough so that 
     <last>it wraps to another line.<last>
<div>

For CSS:

div last{
    text-decoration: underline;
}

CSS To Add Underline After Header Content, Armed with that knowledge, you'll be able to add arbitrary HTML and CSS to your Shiny em is just one of many HTML tags that are used to format text: Instead, the end of the <p> tag is indicated by the function call's closing parenthesis. It is safe to use HTML() if your Shiny app will only ever be run locally for a single� The display: inline-block Value. Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.. Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.

css, Requrements I need to style a h3 tag to have an underline/border after the content. Advanced CSS challenge: underline only the final line of text with CSS I� 26 Impressive web projects built with CSS only. Advanced CSS and Sass: Take Your CSS to the Next Level! Making of Wolf Animation with 900 lines of CSS.

[PDF] Learning PHP, MySQL, JavaScript, and CSS, que utiliza la t�cnica descrita en esta respuesta: Advanced CSS challenge: underline only the final line of text with CSS. me introdujo un span en H2 para no � Cascading Style Sheets cascade. It means that the styles are applied in the same order as they are read by the browser. The first style is applied and then the second and so on. The !important rule provides a way to make your CSS cascade. It also includes the rules that are to be applied always.

HTML element, JavaScript and HTML Text database-driven web design, holding its own in the face of challenges from integrated web pages, using only a few lines of CSS. and other files for you, either on the fly or in advance to serve up later. PHP examples, you may also encounter code where the opening and closing syntax.

Comments
  • What is the containing element?
  • Just like derekmx271 said, it's probably a border-bottom you want to apply to the surrounding div, rather than underlining the text.
  • @derekmx271 The containing element can be anything we want.
  • @NSAddict border-bottom will only achieve the 3rd effect in the question.
  • possible duplicate of Selecting the last line of a <p> element
  • cool man. the p needs the position setting in order for the generated content to work. hope its what you need
  • I don't have access to a bunch of browsers to test this right now. I'm curious to know how cross-browser friendly this is, especially in IE7/8/9
  • Then why tag the question with HTML5 & CSS3 if the solution must work in IE7?
  • On Firefox, the jsfiddle shows a border under the first line of text.
  • This works great save for Firefox. Does anyone have a solution that works on all major modern browsers?