Text underline crossing whitespace

user_13467487 0
Viewed 220

I've been attempting to build the following (figma): enter image description here

As it stands i've tried padding, margins, psudeo elements, whitespaces and I'm pretty stuck on what to do. You can see its possible to have the underline styles on the icon, but when I create distance from 'ID', the underline gap appears. I need the icon to stay as far away as it is here but also keep the underline crossing. enter image description here

HTML: Please note 'input-row' cannot be styled in this instance as it's used across other elements

<div class="input-row">
    <a class="link" href="#">Acceptable Forms of ID    <i class="fas fa-share-square"></i></a>
</div>

.fa-share-square{
    font-size: 0.75rem;
    cursor: pointer;
    color: $secondary-five;
    font-size: 1rem;
    text-decoration: underline dotted $secondary-five;
    text-underline-offset: .5rem;
    text-decoration-thickness: 2px;
}

.link{
    color: $secondary-five;
    font-size: 1rem;
    text-decoration: underline dotted $secondary-five;
    text-underline-offset: .5rem;
    text-decoration-thickness: 2px;
}

Thanks for your help.

underline sass whitespace css
4 Answers

You have a input-row container around these 2 elements,

Add the underline to the container, use margin and or padding to get it right under the text.

user_113345500

Revised Answer

It appears that I had misunderstood your original request. I now understand that you want the underlined (dots) to appear uniformly for the anchor including the space between the text and the Font Awesome icon.

This is more simple than the previous answer.

You will first need to remove the default text-under line from HTML anchors, this is done in the a.link CSS below.

Then you style the anchor as an inline-block/block level element (which it is by default), and style a border rather than text-underline, because text-underline won't (and symantically shouldn't) activate on a lack of text (whitespace). You can also customise the gap between the text and the underline using padding.

So:

HTML:

<div class="input-row">
    <a class="link" href="#">Acceptable Forms of ID    <i class="fas fa-share-square"></i></a>
</div>

And then you set your CSS styling thus:

CSS:

.fa-share-square{
    font-size: 0.75rem;
    cursor: pointer;
    color: $secondary-five;
    font-size: 1rem;
}

    a.link {
        color: #900;
        font-size: 1rem;
        text-decoration: none;
        padding-bottom: 2px;
        border-bottom: 2px dotted #00F;
    }

Full example:

 .fa-share-square{
        font-size: 0.75rem;
        cursor: pointer;
        color:  #900;
        font-size: 1rem;
    }
    
    a.link {
        color: #900;
        font-size: 1rem;
        text-decoration: none;
        padding-bottom: 3px; /* Set the border distance from the text */
        border-bottom: 3px dotted #00F; /* Set the border style */
    }
    
     .fa-share-square {
      width: 3rem;
      height: 1rem;
      padding-left:1rem;
}
<p>(Extra CSS put in place to show the Font Awesome Icon part)</p>
    <div class="input-row">
        <a class="link" href="#">Acceptable Forms of ID
        <i class="fas fa-share-square">ICON</i></a>
    </div>

Manual Reference for CSS Border-bottom.

user_35362360

I had a stroke of genius in the shower. Line spacing.

At first I tried this on the Icon, but the spacing moved the underline to the right, so I needed to apply it to the letter beforehand.

Here you can see my changes and result.

<div class="input-row">
    <a class="link" href="#">Acceptable Forms of I<span>D</span> <i class="fas fa-share-square"></i></a>
</div>

.link{
    color: $secondary-five;
    font-size: 1rem;
    text-decoration: underline dotted $secondary-five;
    text-underline-offset: .5rem;
    text-decoration-thickness: 2px;
    font-weight: bold;
}
span{
        letter-spacing: 12px;
    }

Some minor issues with the dots overlapping each other at certain spacing values, but this is a lot closer to a solution than anything else

enter image description here

user_134674870

You can simply remove text-decoration from your css and update as follows. Also set text-decoration:none for the .link class. Finally set border-bottom for the class input-row and width:fit-content. I am using color:red, you can use of your own choice.

HTML code:

<div class="input-row">
    <a class="link" href="#">Acceptable Forms of ID    <i class="fas fa-share-square"></i></a>
</div>

Updated CSS:

.fa-share-square {
            font-size: 0.75rem;
            cursor: pointer;
            color: red;
            font-size: 1rem;
            /*text-decoration: underline dotted red;
            text-underline-offset: .5rem;
            text-decoration-thickness: 2px;*/
        }

        .link {
            color: red;
            font-size: 1rem;
            text-decoration: none;
            /*text-decoration: underline dotted red;
            text-underline-offset: .5rem;
            text-decoration-thickness: 2px;*/
        }

        .input-row {
            border-bottom: 2px dotted red;
            width: fit-content;
        }
user_105249430
Related