Styling pseudo-elements on link completion?

I created an "underline" animation that uses an alias under :: after the alias. Here is the code for the link and pseudo-element:

Link

a {
    position: relative;
}

      

:: after

a:after {
    content: '';
    display: inline;
    position: absolute;
    height: 2px;
    width: 0%;
    background-color: #ce3f4f;
    left: 0%;
    bottom: 0px;
    transition: all 0.2s ease;
}

a:hover::after {
    width: 100%;
}

      

This all works great when the link is on one line, but if the link spills onto the next line, it fills only at the bottom of the first line, as shown here:

http://i.stack.imgur.com/7SX7o.jpg

If I inspect the element, it turns out that the problem is not resolvable because the browser (Firefox in this case) does not select the fully wrapped element:

http://i.stack.imgur.com/342GH.jpg

Is there a way to solve this with CSS, or is it an issue with the way the browser renders objects? I've played around with a lot of configurations white-space

, display

and position

to no avail.

Here's an example of the behavior:

https://jsfiddle.net/57Lmkyf4/

+3


source to share


1 answer


This cannot be done with CSS. (I implemented it with JS for links that span no more than two lines: https://jsfiddle.net/6zm8L9jq/1/ - you can resize the frame to see it at work)

In my Chrome (39.0.2171.95) the underline under the wrapper a

does not work at all, while in FF it is displayed like in the screenshot above. This is primarily because your element a

is inline (by default) and when it is wrapped, any pseudo-children that depend on its width get the width 0

in Chrome and the width of the element on the first line in FF. Inner elements have no control over their own width / height properties (for example, you cannot set on them width:100px

without changing them to blocking elements), and this also affects any absolutely positioned elements that depend on them for width / height.

If you call a method window.getComputedStyle

on a pseudo element in FF and Chrome like:



var a = document.querySelector('a');
a.onmouseover = function(){

    setTimeout(function(){
        var width = window.getComputedStyle(a,':after').getPropertyValue('width');
        console.log(width);

        },300); //timeout so that animation to 100% width is completed
} 

      

... in chrome you will see 0px

, and in FF you will see 100%

- and none of them will equal the actual 100% of the parent. If you added a child (like a span

) in a

instead of a pseudo element, you could examine the actual width of the child after mouseover

by calling getBoundingClientRect().width

on the child, in which case again in chrome, you will see 0px

, and in FF, the width of the portion of the parent that falls within first line.

You can change the element a

to display: inline-block

and it will work, but it will obviously not complete anymore.

+1


source







All Articles