
Change the aspect ratio of an image using CSS
24/09/2021In this post I'll show you how to change the aspect ratio of an image or element using CSS, and explain why this is important.
Changing bullet colour and icon of a html list element using CSS used to be quite a ‘hacky’ affair. The easiest way that I knew to achieve this effect was to change the ‘list-style’ to ‘none’ and use a ‘::before’ pseudo-element instead. As of time of writing, the top hit on google still suggests this approach.
As with most things, I hadn’t been asked to do anything like this for many years. Recently I’ve become aware of a much better and more modern way to achieve this, using the ‘::marker’ pseudo-element.
To demonstrate this we will first need some simple html:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
Now using css we can simply target the ‘::marker’ pseudo-element of the list element:
li::marker {
color: green;
}
As you’ll be able to see, all the markers have changed to green.
Using the same html we can change the symbol used to denote the marker using the ‘content’ attribute. Add the following to the CSS:
li::marker {
color: green;
content: "⇢";
}
In this example we’re adding a unicode character to the content so that we see a ‘Rightwards Dashed Arrow’ instead of the normal filled circles.
Here is a quick fiddle to demonstrate this approach.
Note: You can also change things like the font-size and font-family of a marker pseudo-element. Why not give it a go?
In theory, we can use the marker pseudo-element on whatever elements we like. However, to do this we have to change the display property of the element to ‘list-item’.
h1 {
display: list-item;
}
h1::marker {
content: "😊";
}
Here we’ve made some happy h1 tags 😊.
In this post I'll show you how to change the aspect ratio of an image or element using CSS, and explain why this is important.
Here is how you can fix node incompatibility error, using "Node Sass does not yet support your current environment" as an example.
Need to make a directory in PHP? No Problem! mkdir has you covered... Need to recursively make directories in PHP? mkdir has you covered, too!
Learn how to regenerate and update WordPress media and image sizes both programmatically (without plugin), and also with a handy plugin.
Ever seen constants like __DIR__ and __FILE__ being used in PHP? These are 'Magic Constants', and this is how we can use them.
Learn how to use event listeners to detect and handle single and multiple keypress events in JavaScript. Add modifier keys to your application!