Is it possible to utilize two :before pseudo classes within a single div element?

Suppose I had the following HTML code snippet:

<div class="container">
<p>blah blah blah</p>
</div>

Can we apply two :before pseudo classes to that same container div?

For example, like this:

.container:before{
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 31%;
    height: 61%;
    background-color: black;
  }

.container:before{
    content: " A String ";
    position: absolute;
    top: 0;
    left: 0;
    background-color: black;
  }

Disregarding the specific CSS properties used, the main question is whether it would be valid to insert two pseudo classes before the container div. If not, is there a workaround to achieve this?

Answer №1

It is not possible to utilize two instances of :before on a single element. An example of this can be seen in the following non-functional jsfiddle, where two :before instances are used on one div. The second :before statement takes precedence over the styles set by the first.

http://jsfiddle.net/Luwhf700/

In contrast, the next example demonstrates a functional use of :before and :after, mimicking the effect of having two :before statements (specifically for absolute positioning elements).

http://jsfiddle.net/Luwhf700/1/

Answer №2

Unfortunately, it is not possible to achieve this due to the overridden css styles. You can view an example here. Additionally, Amar Syla provided a similar answer.

If there is no way to do so, is there an alternative solution?

You may utilize JavaScript/jQuery to add a class or an id to the div based on specific conditions and then apply the desired css.

For instance:

#before1.container{
    content: " ";
    position: absolute;
    top: 0;
    left: 0;

    background-color: red;
  }

#before.container{
    content: " A String ";
    position: absolute;
    top: 100px;
    left: 0;
    background-color: green;
  }

After defining the css rules, you just have to assign the id like below using jQuery/JavaScript:

<div id="before" class="container">
<p>blah blah blah</p>
</div>


<div id="before1" class="container">
<p>blah blah blah</p>
</div>

To learn how to set the div id dynamically, refer to this link: here. It provides solutions in both JavaScript and jQuery.

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 submission of the form is not possible with jQuery

Here is my code: $(document).ready(function(){ console.log("jquery is functioning"); // **** Global Variables **** //starting ingredient number for new ingredients $ing_num = 3; var new_label; var new_input; $("#add_icon").click(funct ...

Use jQuery to add an anchor tag before an image and then close the anchor tag

Here is the code snippet I am working with: <div id="slider"> <img src="images/p1.jpg" /> <img src="images/p2.jpg" /> <img src="images/p3.jpg" /> </div> I am looking to dynamically add <a> tags before ...

Tips for overriding ng-disable in AngularJSUnleashing the

This is a comment box using AngularJS: <tr> <td colspan="5"><br/>Comments* <div><textarea class="form-control" rows="3" cols="60" ng-model="final_data.drc_scope" placeholder="Add comments here" ng-disabled="is_team==0 || isDis ...

Shape with smoothed corners

Is there a way to create rectangles with rounded corners using CSS, SVG, or other methods while maintaining straight horizontal and vertical sides? I attempted to use border-radius for the rounded corners, but found that it created curved edges on both ho ...

The bottom margin fails to function as expected

I've been trying to position a loading image at the bottom right of the page, but everything seems to be working except for the margin-bottom. <div id="preload"> <div align="right" style="margin-bottom:40px; margin-right:50px;"> ...

Div element with fixed position that dynamically adjusts its height according to the position of the

Currently, I am designing a website with two sidebars and a center wrapper for the main content. The sidebars will contain links that jump the user to different sections of the page. I have fixed the position of the sidebars so they stay visible as the use ...

Display <span> next to <select>

Currently, I have a <span> and a <select>. However, in the following code, the <span> is displayed above the <select>. My goal is to arrange it so that the <span> is shown first, followed by the <select>. .requiredSta ...

Designing HR components using Bootstrap and CSS

Trying to integrate Bootstrap into my portfolio website, but struggling with styling the hr elements. They keep coming out like this: https://i.sstatic.net/IApoi.png They also refuse to center align, always sticking to the left. No idea why this is happe ...

When using NextJs, running the commands 'npm build' and 'npm start' can sometimes cause style inconsistencies

Currently working on a project with NextJs (sorry, no screenshots allowed). Running 'npm run dev' for development works perfectly fine, but when I switch to 'npm run build' and then 'npm start', the website displays overlappin ...

Here is a unique version: "A guide on centering a carousel item in jquery upon being clicked."

Does anyone know how to center the item I click in a carousel? I've searched high and low for a solution but couldn't find a clear answer. Can someone please assist me with this? This is what I have tried so far: http://jsfiddle.net/sp9Jv/ Here ...

An HTML form containing various input fields organized as a JSON string

I need to pass two parameters, param1 and param2, to a servlet. Param1 should be in JSON format, while param2 is a regular input value. param1 = {"id":"userid","name":"username","status":"userstatus"} param2 = add How can I accomplish this using the HTM ...

Incorporate a variable into a CSS class

Currently, I am working on developing a component that creates an animation loop with a duration that is passed as a prop to the component. The issue I am facing involves using CSS to create the animation: animate:{ -webkit-transition: 10.0s !important ...

What is the best way to adjust the size of an IMG element while ensuring it remains proportionate and in the same position when the window size is altered?

I am currently in the process of developing a GPS-inspired application, and I have encountered a roadblock while attempting to establish 'no-go' zones on the map. My goal is to have the map dynamically resize based on the window dimensions, using ...

Angular: Implementing asynchronous data retrieval for templates

I am currently facing the following issue: I need to create a table with entries (Obj). Some of these entries have a file attribute. When an entry has a file attribute (entry.file), I need to make a backend call to retrieve the URL of that file: public g ...

Disable list-group-item-action clicking

I'm looking to maintain the list-group-item-action hover effect that changes the background color while eliminating the click effect that activates it. Is there a way to achieve this? I've already removed the href="#" from the If I remove list-g ...

Conceal HTML code from being displayed on a mobile device

After successfully displaying an element on mobile, I am now trying to hide it on the same platform. While I know this can be achieved with CSS using the display:none property, I want to explore alternative methods that do not involve creating unique CSS r ...

Users using an iPhone are unable to adjust the scale or scroll on this website

I find myself wondering what I might be overlooking in this situation Here is the HTML code: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="shortcut icon" href="../../nImg/favicon.ico" ...

Refreshing data dynamically using Ajax along with the feature of pagination

I'm currently working on retrieving data about animals and their speeds from an API. https://i.sstatic.net/w2xCA.png The data is supposed to be stored in a table with 5 columns, resembling the following: https://i.sstatic.net/K9S5w.png Below is th ...

Retrieve the information from the API and populate the tables with the data

I'm currently working on fetching API data and displaying it in tables, using mock data for now. Successfully implemented actions and reducers. Managed to call the API but encountered an issue with network calls where I see a blocked response content ...

Is it necessary to save the details of a specific position in local storage when sliding?

Currently, I am in the process of replicating a webpage design from . I have written the code for the functionality where images and phrases change on every slide. There are three different phrases and images that are being displayed, and my goal is to sto ...