Is there any method to ensure that IE8 properly displays opacity for a `:before` pseudo element?

Here is a simple CSS snippet that I am working with...

div:before {
    content: "Hello there";   
    filter: alpha(opacity=40);
    -moz-opacity: .4;
    opacity: .4;
}

Check it out on jsFiddle.

In Firefox 6, the :before pseudo element displays with the correct opacity. However, in IE8, the opacity is not applied.

Usually, setting the opacity on the main div works fine, but that's not what I'm aiming for.

I attempted to add display: block to no avail.

While I could find a way around this issue, I was wondering if there's a clever trick to make IE8 recognize the opacity property on a :before (and perhaps also on a :after) pseudo element?

cssinternet-explorer-8opacitypseudo-element

Answer №1

It seems like a tricky situation.

A similar issue arose for me in the past, and I came up with a workaround solution (by avoiding the use of :before).

Here's a logical explanation as to why it might not be feasible: Why does a filter gradient on a pseudo element not work in IE8?

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

Ignore the initial children of the highest level divs exclusively

Is there a way to apply a style to all top-level divs within a div, excluding the first one? I have tried using not(:first-child) but it seems to be recursive. How can this be achieved? <div class='want-to-skip-first-a'> <div class= ...

htmlcss

"Disappearing act: box-shadow magically vanishes

Currently facing a perplexing issue: In my code, there is a div called .pagebody with a box shadow assigned as follows: -webkit-box-shadow: 0px 1px 10px -2px rgba(71,71,71,0.42); box-shadow: 0px 1px 10px -2px rgba(71,71,71,0.42); -moz-box-shadow: 0px 1px ...

htmlcss

Utilizing CSS variables and HSLA, create a distinctive linear gradient styling

I am encountering an issue with a CSS variable: :root{ --red: hsl(0, 100%, 74%); } Despite defining the variable, it does not work in the following code snippet: .page-wrapper{ background-image: linear-gradient(hsla(var(--red),.6), hsla(var(--red),.6 ...

htmlcss

Issue regarding the sidebar's top alignment

Having trouble with the positioning of this sidebar. It seems to be hanging slightly over the top edge instead of aligning perfectly with it. Here's how it looks: enter image description here. CSS CODE: https://pastebin.com/RUmsRkYw HTML CODE: https ...

htmlcssbrowsernavigationsidebar

What is the best way to center a div vertically inside another div?

Aligning a div element horizontally within another div element is possible by using the margin: 0 auto; property as long as both elements have a specified width other than auto. However, this method does not work for vertical alignment. Is there a way to ...

htmlcssvertical-alignment

Receiving a null value when attempting to access the ids of dynamically created HTML elements using JavaScript

Encountering issue with accessing ids of dynamically generated HTML elements using javascript In my current project, I am attempting to dynamically alter the ids of div elements and remove buttons that are appended to the parent div. The desired functiona ...

javascriptjqueryhtmlcssjson

When the window width increases, the image within a flexbox causes the flexbox to break

I'm currently working on designing a responsive splash page that covers most of the page (90vh). The layout includes a logo at the top and a simple paragraph at the bottom. I've experimented with using flex-shrink and flex-basis, but it's n ...

htmlcssflexbox

Alternative image loading in a figure element

I'm currently in the process of putting together an image gallery using Angular 4.3.0, where images are displayed as background images within figure elements rather than img tags. The images are initially resized to smaller dimensions before being use ...

javascripthtmlcssangularimage

Div element obstructing the ability to view markers

Issue with a positioned DIV over Google Maps: The DIV is causing accessibility problems for the map, taking up the entire width when it should stop at the green square borders. Interaction with the map is limited to the very bottom after the green square. ...

htmlcssgoogle-maps

Items in a pair of distinct columns

I want to enhance a picture by adding three paragraphs on the left-hand side. Below is my HTML code: <md-toolbar layout-align="center center"> <h3>Traffic Light Component</h3> </md-toolbar> <md-grid-list md-cols ...

htmlcssangularjs

Struggling with creating a CSS navigation bar, having issues with hover functionality

I have a question about the navigation menu I created using CSS. I have included a sub-menu that appears when hovering over the main menu item, along with a triangle created with CSS placed underneath the menu. You can view the sample code here: http://js ...

htmlcsshovernav

Preventing a particular CSS file from being applied to my Angular component

Currently, my modal component is built using bootstrap, but we encountered an issue with our project's CSS file which also utilizes the same classes as bootstrap (.Modal, .Modal-header). This conflicting styling was causing problems for the design of ...

cssangularbootstrap-4bootstrap-modalangular12

Next.js production mode prevents CSS from loading properly

Issue Upon building and launching a production build of our application, the CSS fails to load. Inspecting the devtools reveals a multitude of errors and warnings: Possible Causes The problems do not occur when running the app in development mode. Othe ...

csswebpacksassnext.jswebpack-style-loader

What is the method for retrieving the font size of elements in the native view using appium?

Can the font size of text in the native view be retrieved using appium? I am aware of using driver.findElement(By.id("by-id")).getCssValue("font-size"); for web views. Is there a similar method for native views? ...

javacssseleniumappium

Eliminate the hovering effect from images that are hyperlinked

I am feeling incredibly desperate as I have spent hours searching the internet for a solution with no success. When it comes to text links, I have included the following CSS code: a:hover img { border-bottom: none !important; } However, this code is als ...

javascriptjqueryhtmlcss

Troubleshooting multiple element visibility problems with jQuery

Please take a look at the code snippet below. $(document).ready(function(){ $(".like-btn").hover(function() { var rowid = $(this).attr("data-rowid"); $(".reaction-box[data-rowid='" + rowid + "']").fadeIn(100, function() { $(".reaction ...

javascriptjqueryhtmlcssjquery-ui

Creating a flexible grid layout with DIVs that share equal width dimensions

Struggling with my HTML and CSS code, I need a way to structure nested DIV blocks into a responsive grid where each block has the same width. Despite my efforts, nothing seems to work as expected. Currently, the nested DIVs are stacked vertically one on to ...

htmlcss

What is the best way to ensure that a specified number of list items (li) will align properly within the width of an unordered list (ul

I'm attempting to make all the li elements' width match that of my ul element. Here is the code I am using: http://jsfiddle.net/4XR5V/2/ I have looked at some similar questions on the website and tried adding: ul { width: 100%; display: tab ...

htmlcss

Steps to design a unique input radio button with embedded attributes

In my current project, I am utilizing react styled components for styling. One issue that I have encountered is with the text placement within a box and the need to style it differently when checked. What have I attempted so far? I created an outer div a ...

javascripthtmlcssreactjs

Can someone assist me in figuring out how to solve selecting multiple radio buttons at once

<script type="text/javascript"> let x = "1.html"; let y = "2.html"; function redirectPage(form){ for(let i=0; i<form.length; i++) { if(form.answerq[i].checked && form.answerw[i].checked && f ...

javascripthtmlcssradio-button