1

I have an anchor tag, and I'm using the :before selector to add some text. I have added a hover state around the anchor tag. The :before text is slightly larger than the rest of the text in the anchor tag and I'm adding a display: inline-block property to the before text.

When I hover over the anchor tag, the hover state is wrapped tightly around the all the anchor text, including the :before text (EXAMPLE 1 in codepen). Like so:

https://user-images.githubusercontent.com/20184809/52691191-27364e80-2fb4-11e9-9ffe-8777e645acee.png

How ever if I add the display:inline-block property to the anchor tag the hover state is a rectangle which matches the height of the larger :before text. Like so:

https://user-images.githubusercontent.com/20184809/52691272-7da38d00-2fb4-11e9-900b-c795623de3e2.png

Why is this?

.link-1:hover, .link-2:hover {  
  outline: 3px solid green;
  outline-offset: 2px;  
}


.link:before {
  content:':before text';
  font-size: 35px;
  display: inline-block;
}

.link-1 {
  display: inline-block;
}
<!-- EXAMPLE 2 -->
<a href="#" class="link link-2"> anchor text</a>

<br>

<!-- EXAMPLE 1 -->
<a href="#" class="link link-1"> anchor text</a>

EDIT:

I've noticed this happens on Chrome and not Safari and firefox. It could be a browser thing?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Alex
  • 11
  • 3
  • Please provide a [mcve] – zer00ne Feb 13 '19 at 07:57
  • The display for a link would be 'inline' by default, so its size is relative to its content. When you make the anchor an 'inline-block' it includes everything in that container, including the pseudo selector ':before' and the rest of the link. The whole thing is one block. – tshimkus Feb 13 '19 at 08:01
  • @zer00ne he did ;-) – Tali Luvhengo Feb 13 '19 at 08:05
  • I've noticed this happens on Chrome and not Safari and firefox. It could be a browser thing? – Alex Feb 13 '19 at 08:09
  • @TalifhaniLuvhengo no a [mcve] needs to be posted as a Stack Snippet because links break and then readers will not see a quality question with an example in code, they'll just see paragraphs of text referring to code they cannot see. Much like your answer. – zer00ne Feb 13 '19 at 08:32
  • Ah, apologies. Makes sense. @zer00ne – Tali Luvhengo Feb 13 '19 at 08:34

2 Answers2

1

From the specification we can read:

Outlines may be non-rectangular. For example, if the element is broken across several lines, the outline is the minimum outline that encloses all the element's boxes. In contrast to borders, the outline is not open at the line box's end or start, but is always fully connected if possible.

And

The outline may be drawn starting just outside the border edge.

For the second example, when making the element inline-block we will have the below

.link-1:hover, .link-2:hover {  
  outline: 3px solid green;
  outline-offset: 2px;  
}


.link:before {
  content:':before text';
  font-size: 35px;
  display: inline-block;
}

.link-1 {
  display: inline-block;
  border:1px solid;
}
<a href="#" class="link link-1"> anchor text</a>

It's clear that the outline need to at least surround the border and it will be the same for all the browser.

But for the first example we will have this:

.link-1:hover, .link-2:hover {  
  outline: 3px solid green;
  outline-offset: 2px;  
}


.link:before {
  content:':before text';
  font-size: 35px;
  display: inline-block;
}

.link,
.link:before{
  border:1px solid;
}
<!-- EXAMPLE 2 -->
<a href="#" class="link link-2"> anchor text</a>

It seems that Chrome in this case is following the borders to draw the outline and is respecting the Specification by keeping it connected. The result is somehow logical but other browser aren't doing the same. I won't say if Firefox is doing wrong but both result are fine and doesn't violate the specification.

In both cases we have :

  • The minimum outline that encloses all the element's boxes
  • Always fully connected if possible
  • May be drawn starting just outside the border edge
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
-1

There are two types of HTML elements. Inline and Block elements. Block elements take up the full width available to them(With exception of inline blocks, will come back to these). Inline elements only take up as much space as they need, i.e they try to be as small as possible. So just the space around their outer border. When you add display: inline-block you turn the whole thing into a block which is why it becomes rectangular. The difference with inline-blocks is that they also take up as much space as they need but they are also fully rectangular. Check out this answer too CSS display: inline vs inline-block

Tali Luvhengo
  • 349
  • 1
  • 15