"Creating a responsive design: Setting the width of a :before pseudo element based on the size of

I am looking to encircle specific words with an image circle.

<p>
   <span class="Subjekt">Father</span>
   <span class="Predicate">brings</span>
</p>

using

.Subject:before {
    position: absolute;
    background-image: url(images/markup/circle.png);
    background-size: 100% 100%;
    display: inline-block;
    margin-left: -20px;
    width: 100px; 
    height: 50px;
    content:"";
}

This method works well, but the size is fixed.

Is there a way to make the pseudo element's width relative to the .Subject element?

htmlcsswidthcss-positionpseudo-element

Answer №1

Utilize relative positioning to place the before element in relation to the Subject.

Check out the illustration below:

  1. Assign a relative position to the Subject.

  2. Experiment with changing the width and height of the Subject (Keep in mind that it has been set to inline-block, as inline elements will not consider width or height by default).

  3. Set both the height and width of the before element to 100%.

  4. Apply z-index: -1 to move the before element behind.

.Subject {
    position: relative;
    width: 200px;
    height: 200px;
    display: inline-block;
}
.Subject:before {
    position: absolute;
    background-image: url(http://placehold.it/100x100);
    background-size: 100% 100%;
    display: inline-block;
    width: 100%; 
    height: 100%;
    content:"";
    z-index: -1;
}
<p>
   <span class="Subject">Father</span>
   <span class="Predicate">brings</span>
</p>

Feel free to continue building on this concept. Share your thoughts on this. Thank you!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The CSS Bootstrap 4 class 'input-group-append' is not functioning properly. Just recently, the styles were displaying correctly

My web application using AngularJS 1.7.8, jQuery 3.3.1, Bootstrap 4.3.1, and various other CSS and JS libraries worked seamlessly last week. However, today I noticed an issue with the button visualization. To Replicate: Visit openskymap.org to see my d ...

javascriptcssangularjsbuttonbootstrap-4

Click on the div to automatically insert its text into the textarea

I am looking for a way to enable users to edit their posts easily. My idea is to have them click on a link, which will then hide the original div containing their post and reveal a new div with the old text inside a textarea for editing. Despite searching ...

javascriptjqueryhtml

What methods can I utilize to increase the speed of my JavaScript animation?

Recently, I implemented a Vue component designed to loop a div over the X axis. While it functions correctly, I can't help but notice that it is consuming an excessive amount of CPU. I am interested in optimizing this animation for better performance. ...

javascripthtmlcssvue.jscss-transitions

Display an additional HTML page without altering the existing one

First of all, I would like to apologize for my poor English. Attending a French school didn't provide much opportunity to practice other languages. I have a header.html on my website that I am unable to modify because it is not owned by me. However, ...

javascriptjqueryhtml

Outlook failing to recognize text dimensions

Implementing: <html> <head> <style> p { font-size: 16px; } .font-size-16 { font-size: 16px !important; } </style> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspend ...

htmlcssoutlookhtml-emailfont-size

When an element is appended, its image height may sometimes be mistakenly reported as

I am dynamically adding divs and I need to retrieve the height and width of an image. Based on this information, I have to apply CSS to the MB-Container class. For example: if the image is portrait orientation, set container width to 100%. If it's ...

javascriptjqueryhtmlcss

Add a unique CSS style to both text and image using anchor tags

Why isn't the hover effect of color transition and underline being applied to the image? It seems to only work for text. While I understand that the color transition may require a change in image color, shouldn't the underline still occur? This ...

javascripthtmlcss

Tips on enlarging a webpage without showing the scroll bar on the main component

My goal is to create a webpage that resembles a window application. However, I've encountered an issue where zooming in on the page results in a scroll bar appearing on the main page. The parameters for the main page (the parent) are set as follows: w ...

cssreactjsflexboxmaterial-uiscrollbar

Tips on handling a JSON string alert

Can someone guide me on how to extract a specific value from a JSON string I received in an alert message? The JSON string looks like this: {"Error":true, "data":["not available","somethinghere"]} The JSON string is obtained from an alert using the follow ...

javascripthtmljson

Creating a form in PHP/HTML with a variety of selectable options

Here is my PHP and HTML code: $damt2 = isset($_POST['damt2']) ? $_POST['damt2'] : 200; $dateinfo2 = json_decode(file_get_contents($_SESSION['base_path'] . 'dl.dict'), true); arsort($dateinfo2); // Sort an array in r ...

phphtml

The background color should only cover a specific percentage of the element

Here is the current structure I have: <li class="myclass" ng-class="myAngularClass"> <div> div1 <div> div2 </div> </div> </li> The li element has dynamic dimensions and width. The class "myAngularClass" i ...

cssangularjs

Issues with Google Fonts failing to load correctly

Would you mind taking a look at this issue for me? In all browsers except Firefox, the expected behavior is that a web font remains invisible until fully loaded, preserving space on the page. Interestingly, in Chrome and IE9 (the browsers I tested), ther ...

javascripthtmlcssgoogle-webfonts

The hover effect generates a flickering sensation

I am having trouble displaying options on an image when hovering over it, as the displayed options keep flickering. $('a').hover(function(event) { var href = $(this).attr('href'); var top = $(this).next().css("bot ...

javascriptjqueryhtmlasp.netcss

Creating a video game HUD effect using JavaScript and HTML5

In an attempt to recreate a video game HUD using HTML5, I have styled a div with CSS properties to resemble a game overlay. When a navigation link is clicked, the div should transition from a hidden state (display:none), then flash twice rapidly before fad ...

javascripthtml

"Major issues arise as CSS3 Animation fails to function properly across all web

I have been experimenting with using a sprite and CSS3 animation to create a rollover effect. While it seems to be working in CODA 2, I'm encountering issues when testing in Mozilla, Chrome, Safari, and Opera as the animation fails to trigger. /*link ...

cssspritecss-animations

Is it possible to use WHILE loops twice in PHP?

Just starting out with PHP and hoping for some assistance. I have a MySQL database table with columns for "id", "img", "link", and "desc". My goal is to echo all of this data in the following format: <div id="featured"> <a target='_b ...

phphtmlloops

What steps should I take to ensure that jQuery functions remain functional on loaded code?

I have implemented modals on all my pages except for the first one to save time. Here is the script that loads my modals: $(function () { $('#header').load('reusenavbar.php'); $('#loginModal').load('reuseloginmo ...

javascriptjqueryhtml

Using JavaScript to manipulate an HTML canvas

I currently have an index.hTML file that is set up to display a canvas using the following code: <body> <canvas> </canvas> <script src="./JS/index.js" type="module"></script> </body> Within my JavaScript fi ...

javascripthtmlcanvashtml5-canvas

Display or conceal a frame with the help of JavaScript or jQuery

Is there a simple way to hide the "topFrame" and "menu" frames when clicking an image or button, and then unhide them by clicking again? Apologies for not including the "topFrame" and "menu" jsp files, as they are dynamically generated in my application. ...

javascriptjqueryhtml

Unusual Behavior of *ngIf and jQuery in Angular 5: A curious case

I'm encountering a strange issue when using the expand-collapse feature of Bootstrap 4 with *ngIf for expansion and collapse. I noticed that the jQuery doesn't work when *ngIf is used, but it works fine when *ngIf is removed. HTML: <div cla ...

htmlangulartypescript