Text insertion using CSS

HTML & CSS
1

I try to set a new text using CSS and pseudo element. How to add a text like Call us now! using CSS if I have a background image as attached file.
test

Images site is 70 px as height value.

2

Create an element, then set the background image via css.

<div class="call">Call Us Now</div>

.call { background-image: url("/img/curve.png"); }

You’ll probably need to play with sizing or coverage but that’s the basic
idea.

1 Like
3

Hi there toplisek,

dispense with the image, CSS is now your friend. :winky:

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: normal 1em / 1.6em sans-serif;
 }
div {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 8.749em;
	height: 2.625em;
	margin: auto;
	border-width: 0.2em 0.2em 0.2em 0;
	border-style: solid;
	border-color: #25aae2;
	border-radius: 0 1.3125em 1.3125em 0;
    box-sizing: border-box;
	background-color: #fff;
	font-size: 1.5em;
    color: #25aae2;
}  
</style>

</head>
<body>

 <div>Call us now</div>

</body>
</html>

coothead

3 Likes
4

Thank you for the message.

5

To add your text to the html element using css try this code:

<button class="btn"></button>

.btn {

            width: 200px;

            height: 70px;

            background-image: url("img-sample.jpg");

            position: relative;

        }

        .btn::after {

            content: 'Call us now!';

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);  

        }
6

Welcome to the forums, @pmdTemplates.

There is a problem with your approach.

Accessibility

Content added using pseudo-elements is not inserted into the DOM—it is only visually displayed. Hence, screen readers won’t be able to access and read the content generated using pseudo-elements. So, it is recommended that you don’t use pseudo-elements to insert vital content into a page (such as footer notes that are relevant to the article, for example).

Pseudo-elements are mostly used to insert and style cosmetic content, and should not be relied on to insert content that is relevant to the meaning and completeness of the content on the page.

Also, since the content inserted using pseudo-elements is not inserted into the DOM, this means that you cannot attach any event handlers to it using JavaScript.

https://tympanus.net/codrops/css_reference/after/

5 Likes
7

Part of my job at work is accessibility related, and I was recommended this screenreader for testing - https://www.nvaccess.org/download/

It actually does pick up pseudo elements. E.g. I had a “+” plus sign in a pseudo element (normally it’s a fontawesome font icon) and it actually read out the standard text, and read out “plus” at the end. It picked it up.

It ignores font icons though, but regular text like the “+” was picked up. Not saying all screen readers do that but it was a cool little thing we discovered and we were shocked at it happening.

4 Likes
8

Support is better, however its still at this point a failure:
CSS content Failure Criterion

Not to mention to cootheads example, why use an image when you can use CSS.

3 Likes
9

I think in this instance, there is no need to use pseudo elements or images.
There are times these things come in useful, but I don’t think this is one of them.

3 Likes
10

I think that’s the caveat: behaviour differs with different screen reader / browser combinations, and just because something works in one instance, it doesn’t necessarily work in another.

I’m also aware that users of assistive technology are often locked into using older versions because of the prohibitive costs of updating.

2 Likes
11

Thanks @TechnoBear for your comments but the initial request from @toplisek was to add text to the button using css not html.

And I also recommend to add role=“button” attribute to the <div> element or better to wrap 'Call us now! ’ into the <button> element as it has built-in keyboard accessibility, so users can navigate between buttons using the ‘Tab’ key and activate their selection using ‘Return’ or ‘Enter’.

12

I can see no reference to a button element in
his post. :unhappy:

coothead

13

Okay and what WE ALL have said is “bad idea use markup / css”. If one comes asking for advice and a bad implementation is given, expect it to be called out.

Just because I can tab to your button… does not make it accessible. … What’s the hover state??? Whats the focus state?? And again… css text inject is bad m’kay?

14

Hello @coothead,

Yes, you are correct he didn’t mention a button element, but call to action text like ‘Call us now!’ I used to add into the <button> or <a href=""> elements in my practice.

15

I fully agree with you @bwclovis that to add a text to the button with the help of pseudo element is a bad idea. Just thought that it was a kind of a non-trivial task for @toplisek.

16

…it brings this little adage to mind…

“if you find yourself in a hole, stop digging” :rofl:

coothead

18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.