Jump to content

Where in CSS code is the image hidden? How to shrink it?


pstein

Recommended Posts

Lets start with an example web page:

https://www.heise.de/ratgeber/FAQ-zu-2G-und-3G-Coronaregeln-So-werden-Zertifikate-richtig-geprueft-6265435.html?view=print

When you scroll down a bit on this page you can see left of many paragraphs some question and exclamations marks "?" and "!"

When I right-click on one of them (in Firefox) and select "Inspect" from context menu I can see the (HTML/CSS) code.

Unfortunately no src() attribute is visible the "?" and "!" pictures seem to be hidden somewhere behind

 

::before

and/or

::after

statements ?

How can I find out the real corresponding location and reference?

How can I shrink the image sizes (height+width) by lets say 40%?

Peter

 

 

 

Link to comment
Share on other sites

They're not images, they're actually text. There are these rules in the stylesheets:

.rte__abs--frage::before {
    content: "?";
}

.rte__abs--antwort::before {
    content: "!";
}

This rule is the one that determines the size by using the font-size property:

.rte__abs--antwort::before, .rte__abs--frage::before {
    color: #5a5a5a;
    color: var(--a-theme-secondary,#5a5a5a);
    float: left;
    padding: 0 1rem 0 0;
    font-size: 3rem;
    font-weight: 600;
    line-height: 1;
}

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...