Difficult CSS code – Is it possible?

Look at using CSS before and after pseudo elements.

Thanks for that, I tried but it just messed up the spacing in my nav menu. Would it be better to upload an image instead of using the [] keys?

Is there any way I could do it in HTML? would that be easier?

Here is my site if you can help me a little with the code https://www.insidecontentmarketing

Can you post the CSS you tried using those pseudo elements and make it apparent on your website?

I took it off because it looked wrong, but this is what I had

.main-navigation .current-menu-item a, .main-navigation .current-menu-ancestor a, .main-navigation .current_page_item a, .main-navigation .current_page_ancestor a:before {
	   content: "[";
	}

.main-navigation .current-menu-item a, .main-navigation .current-menu-ancestor a, .main-navigation .current_page_item a, .main-navigation .current_page_ancestor a:before {
content: “”;
display: block;
width: 50px;
height: 50px;}

That what I tried for before, and the same for after using :after

you need to add the :before and :after to each of the styles in the list;
it is clearer to see if you write the css slightly different:

example:

.main-navigation .current-menu-item a:before,
.main-navigation .current-menu-ancestor a:before,
.main-navigation .current_page_item a:before,
.main-navigation .current_page_ancestor a:before {
	   content: "[";
	}

same for :after

That is working now, Thank you for your help. The spacing looked a little strange when it was just contet: “[” so I added a space content:”[ ” but the spacing on top looks a bit strange?

Do I still need to add the content i.e:

` #example:before {
2 content: “”;
3 display: block;
4 width: 100px;
5 height: 100px;

I think that worked. I am not sure of the spacing, it is aligning with the top of the font, but I think that’s the best I can do. Thanks for your help Andrew and Alchymyth.

Now to try and sort out my footer widgets!

Remember you can add more than content: "" in the :before and :after styles, try playing around with font-size or font weight, etc.

Andrew, thank you kindly for all your assistance. Adjusting the style worked perfectly. I adjusted it like this

.main-navigation .current-menu-item a:after,
.main-navigation .current-menu-ancestor a:after,
.main-navigation .current_page_item a:after,
.main-navigation .current_page_ancestor a:after {
	   content: "]";
font-weight:bold;
font-size: 15px;
	}

Do we mark threads as solved here? Thank you again for your support I really appreciate it.