Home/ Questions/Q 8785959
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T21:29:12+00:00

I need to implement the following markup: The problem is that I can use

  • 0

I need to implement the following markup:
enter image description here

The problem is that I can use only HTML+CSS and XSLT to produce it.

I thought of writing a template that would split the text into lines with XSL and print each line as a different paragraph <p> with border-bottom set. Is there a simpler way to achieve this by means of HTML+CSS?

A small update: The point here is to have this underline extend past the text and take all the available width. So all lines are of the same length (like lines in a copybook), except the first one which may be shorter

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use an inline element such as <span> which will treat border-bottom like underline:

    <p>
    <span>
        <del>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</del> sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
    </span>
</p>

    and CSS:

    span {
    border-bottom: 4px solid black;
}
del {
    color: red;
}

    Demo here.

    Result using the markup above:

    result in Chrome

    EDIT:

    1.

    Extending @aefxx’s answer, if you can use CSS3 try this:

    .strike {
    background-image: -moz-linear-gradient(top , rgba(255, 255, 255, 0) 34px, #000000 34px, #000000 38px);
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0) 34px, #000000 34px, #000000 38px);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 34px, #000000 34px, #000000 38px);
    background-repeat: repeat-y;
    background-size: 100% 38px;
}
p {
    line-height: 38px;
}
p:before {
    background: #fff;
    content:"\00a0";
    display: inline-block;
    height: 38px;
    width: 50px;
}
del span {
    color: red;
}

    ​Demo here – this will only work in the latest browsers including Firefox and Chrome.

    Result in Chrome:

    result using gradient

    2.

    If you’re happy with justified text:

    p,span {
    border-bottom: 4px solid black;
    line-height: 30px;
    text-align: justify;
    text-indent: 50px;
}
p>span {
    padding-bottom: 5px;
    vertical-align: top;
}
del span {
    border-bottom: 0 none;
    color: red;
}

    Demo here. ​There are some issues with line-height but should be easy to figure out.

    Result in Chrome:

    enter image description here

    Other than that, I’m afraid you might have to wrap your lines in some containers.

    • 0