Is it permissible to employ both CSS pseudo-elements, namely before and after, on a single selector in this instance?

Seeking to create a visually appealing horizontal menu navigation resembling:

{image1} ITEM1 [separator1] {image2} ITEM2 [separator2] etc.

However, a constraint exists - the HTML structure must remain unchanged. Can this be achieved solely with CSS using the provided markup: http://jsfiddle.net/Mrt4V/

Despite numerous attempts, I have only managed to achieve the following layout by utilizing the :before and :after pseudo-elements:

{image1} [separator1] ITEM1 {image2} [separator2] ITEM2 etc.

An obstacle seems to emerge here:

li a:after {
  content: '';
  float: left;
  zoom: 1;
  margin: 0 0 0 2px;
  width: 4px;
  height: 16px;
  background: url('http://static-caselogic-com.r.worldssl.net/images/CaseLogic/Misc/CategoryMenuSeparator.png') 0 0 no-repeat;
}

What could possibly be going wrong in my approach?

csscss-selectors

Answer №1

In this particular situation, achieving the right positioning is crucial.

I made adjustments by adding position:relative to the <a> tag and position:absolute to both :before and :after.

The goal was to position :before and :after elements relative to the <a> tag.

I refined the CSS changes to achieve the desired outcome.

You can view the working example here:

http://jsfiddle.net/UniqueUser/jdopqwer/

Answer №2

To achieve the desired effect, simply adjust the CSS property for :after to display: inline-block and eliminate the use of float: left.

For a visual example, refer to this demonstration on: http://jsfiddle.net/Mrt4V/1/

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

I am curious about this "normalize.less" that appears in the F12 Developer Console

Trying to track down information on this mysterious "normalize.less" that is appearing in the Chrome 76 developer console has proven to be a challenge for me. In Firefox 69's console, it displays bootstrap.min.css instead, leading me to believe that i ...

cssless

Is there a way to retrieve the widths of several <span> elements at once?

Having a few <span> elements generated dynamically, I need to find out their combined width. Wrapping them in a <div> and using alert($("#spanWrap").width()); resulted in the container's width instead of that of the <span> elements. ...

javascriptjqueryhtmlcss

What is the best way to align a div to the bottom of a table cell?

I need help with positioning a div inside a table cell that has 100% height. How can I align this div to the bottom of the cell? Furthermore, there are other divs within the same cell that I would like to position in the middle and at the top. ...

htmlcss

Ensure that col-6 expands to fill the entire row in the event that the other col-6 is hidden on a

I'm currently working on a project that involves two columns. <div class="col-6"> <p> Here is some text for the paragraph. </p> </div> <div class="col-6 d-none d-sm-block"> <img class="goal-f1 rounded" src=" ...

htmlcsstwitter-bootstrapbootstrap-4

Unexpected blank space detected at the bottom of the page in Angular 13

Using the NGX-ADMIN template built on Angular 12 has been smooth sailing until an upgrade to Angular 13. With this simple version change, I am now faced with a perplexing issue that I can't seem to pinpoint or resolve. I can confidently say that shif ...

cssangular

Exploring High-Density Mobile Devices with Bootstrap 3 Landscape Mode

After completing my first Bootstrap site using version 3, I noticed a display issue when viewing it on an iPhone 5 or LG G2 in landscape mode due to the pixel density. This was not a problem with the Responsive Grid system I previously used. Although I sp ...

csstwitter-bootstrapresponsive-designtwitter-bootstrap-3

Tips for activating a sticky navigation button by scrolling down slightly

Currently in the process of developing a website using React and focusing on optimizing the mobile version first. One feature I am working on is to have a sticky navigation bar that remains at the top after scrolling down. In the attached picture, there is ...

htmlcssreactjs

Implement a Selection Feature in Angular

Currently, I am working on an application where users can add new rows with the same fields. One of the requirements is to allow users to add an option to a select element. While I have successfully implemented this in jQuery, I am facing challenges integr ...

javascriptjqueryangularjscss

Unable to choose a child div using jQuery

<div class='class1'> <div class='class2'> <div class='class3'> some unique text </div> <div class='class5'> more unique text </div> </div> < ...

jqueryhtmlcssselect

Tips for customizing CSS in cakePHP 1.3

Hey there, I've come across an issue regarding the CSS for my search plugin. It seems that some of the CSS rules I set in /plugin/searchable/webroot/css/searchable_style are not being applied. My assumption is that it's being overridden by the de ...

csscakephpcakephp-1.3

Custom control unable to display MP3 file

Hey, I came across this awesome button that I am really interested in using: https://css-tricks.com/making-pure-css-playpause-button/ I'm currently facing two issues with it. First, I can't seem to play the sound. I've placed the mp3 file ...

javascripthtmlcssmp3

Resize images smoothly without disrupting the anchor scrolling

I have created a website with the following design: (Caution: The site is built using AngularJS on a server that may not serve it correctly - please visit directly instead of using browser reload.) However, I am facing two conflicting requirements... ...

htmlcss

Uncovering the source of glitchy Angular Animations - could it be caused by CSS, code, or ng-directives? Plus, a bonus XKCD comic for some light-hearted humor

Just finished creating an XKCD app for a MEAN stack class I'm enrolled in, and I'm almost done with it. However, there's this annoying visual bug that's bothering me, especially with the angular animations. Here is the link to my deploy ...

javascriptcssangularjsuiviewanimationangularjs-digest

styled components are having issues with background gradients and opacity not functioning properly

Hello, I am currently working with styled components and have the following global style code: const GlobalStyle = createGlobalStyle` html{ font-family: roboto; background: linear-gradient(45deg,rgba(137,255,255,0.5),rgba(161,252,143, 0 ...

csstypescriptnext.jsstyled-components

Bringing together embedded chat and stream seamlessly with CSS styling

I'm in the process of integrating a chat feature with my Twitch stream on a Xenforo forum page. I aim for the stream to be displayed in 16:9 aspect ratio to ensure high definition quality, and I want it to adapt to the user's screen resolution. B ...

htmlcssiframetwitchxenforo

What is the best way to use jQuery to adjust the size of a slider image based on a percentage of the browser window

I've been searching all over for a solution to this issue, but so far I haven't had any luck. Basically, I have an image that is 1800 pixels wide by 500 pixels high. I need this image to adapt to all screen resolutions. Instead of having a fixed ...

jqueryhtmlcss

What could be causing the malfunction in my JavaScript random selector?

Can anyone assist me with this issue? I'm attempting to implement JavaScript functionality to highlight randomly selected picks that I input, but it's not functioning correctly. Every time I inspect my JS code on the webpage, I encounter an erro ...

javascripthtmlcsshighlight

Can someone guide me on how to create scrolling effects for my content? [html/css]

insert image description here Image dedicated to MrXQ I require assistance in verifying the accuracy of the following code - all content displayed below has been altered from the original for privacy concerns My objective is to have the headers scroll o ...

htmlcss

Tips for positioning a div relative to another div while controlling its z-index

Hey there, take a look at the image below https://i.sstatic.net/zYiaY.png The issue I'm facing is quite common - I have div 1 and div 2 visible in a loop, but divs 3 are hidden. When div 2 is clicked on, everything is great so far. However, what I wa ...

javascriptjquerycsshtml

CSS exhibiting variations on similar pages

Although the pages look identical, they are actually pulled from the same template file in Drupal but have different URLs. nyc.thedelimagazine.com/snacks In my document head, I've included a style rule that overrides a stylesheet further up the casc ...

cssdrupal