Chrome shows wrong highlighting on psuedo selectors hover

I have a weird issue where when I hover on the pseudo element (::before) here, the highlight seem’s to be off.

Screenshot

The css given is

.testimonial__quote::before {
      content: open-quote;
      font-size: 11.25rem;
      width: 4.0625rem;
      height: 3.4375rem;
      position: absolute;
      color: #fbce07;
      display: block;
      font-style: italic;
      font-family: Arial, Helvetica, sans-serif;
    }

HTML:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean finibus lorem eu aliquet fermentum. Vestibulum ante ipsum primis in faucibus orci luctus.

- Scuderia Ferrari

Very weird.

Any advice?

Thanks.

Alternative for display:contents in Chrome?

What is the alternate solution to implement the following in chrome.

display:contents;

Currently only firefox supports them in all versions.

Is there any other way to get the same features as this css tag.

enter image description here

How can I stop my chrome extension injected button style from overriding?

I am currently working on a chrome extension, which injects few buttons on some sites, but I facing this problem that the button element styles are being overridden by that site’s css. What should I do to prevent that?

css transition doesn’t work on chrome extension

I am building a chrome extension, when user click on the button I am loading a custom popup window from my content div

/contentScript.js

var contentDiv = `
`; chrome.runtime.onMessage.addListener(gotMessage); function gotMessage (request, sender, sendResponse) { $("body").append(contentDiv); $('#mydiv-container').addClass('visible'); }

This works, problem is that I use a css transition that doesn’t work

/content.css

#mydiv-container {
    opacity: 0;
    height: 390px;
    width: 400px;
    position: fixed;
    top: -200px;
    z-index: 999999999;
    transition: all 2s;
}

#mydiv-container.visible {
  opacity: 1;
  top: 20px;
  transition: all 2s;
}

This doesn’t work as it expected, the transition is not taking place.
How can I fix this.

How can I determine which font file is being used, not just the font family?

Let’s say I have the following font face definitions:

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/open-sans.regular.woff") format("woff");
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans.light.woff') format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans.semibold.woff') format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans.bold.woff') format('woff');
}

In Chrome’s dev tools, I can tell which font family is being used:

enter image description here

But is there a way to tell which specific font file is being used? I’m trying to verify that the browser is actually using the bold version of the font, for example, instead of doing its own ‘fake’ bolding on the regular version of the font.