How to place a circle below text using CSS

I'm attempting to center a 5px x 5px circle under the links in a navigation bar to indicate the current page, but I'm uncertain about how to achieve this effect.

Here is the current outcome: Link to Image

This is what I aspire to accomplish: Link to Image

Below is the code snippet:

        <ul id="nav-menu">
            <li class="nav-menu-item">
                <a href="ourwork.html">Our work</a>
            </li>
            <li class="nav-menu-item">
                <a href="#whatwedo">What we do</a>
            </li>
            <li class="nav-menu-item">
                <a href="#blog">Blog</a>
            </li>
            <li class="nav-menu-item">
                <a href="#contact">Contact</a>
            </li>
        </ul>
  nav {
    height: 70px;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 75px;
}
#nav-logo-link {
    flex: 1;
}
#nav-logo {
    height: 35px;
}
#nav-menu {
    list-style: none;
    padding: 0;
    white-space: nowrap;
}
#nav-menu > li {
    display: inline;
    margin: 0 10px;
}
#nav-menu > li > a {
    text-decoration: none;
    color: #000;
}

My attempt involved using an <i> element inside the <li> and positioning it absolutely. Although I was able to adjust its vertical position correctly, when setting left: 0;, it unexpectedly moved to the left side of the entire navigation bar. I also tried placing a <div> within the <li>, but that did not yield the desired results.

Any suggestions or solutions would be greatly appreciated!

htmlcssshapes

Answer №1

To achieve this effect, you can utilize an after pseudo element combined with a UTF8 character. Check out the example in this fiddle.

Note: If you want this to trigger when a user clicks a link and navigates to that page (as opposed to hovering), consider using a data attribute as demonstrated below.

Here are three modifications I made to your code:

  1. Added position: relative; to your anchors, enabling the use of position: absolute in the subsequent CSS block:

    nav-menu > li > a {

    text-decoration: none;
color: #000;
position: relative;

    }

  2. Inserted a pseudo element positioned absolutely at 50% of the anchor's width, along with setting its width and centering it within by applying a negative margin equal to half its width. This method relies on defining the selected item through JavaScript, as indicated in point 3. Feel free to adjust the color:

    nav-menu > li > a[data-selected=true]:after {

    content: "\25CF";
position: absolute;
top: 1.1em;
left: 50%;
width: 10px;
margin-left: -5px;
color: cadetblue;

    }

  3. Introduced a data-selected="true" attribute to the chosen anchor element. Ensure to update this attribute through JavaScript whenever a different anchor is selected. This enables the CSS in step 2 to target the appropriate anchor.

Answer №2

To achieve this effect, you can implement a CSS rule for nav-menu-item:after{ which will add a circle after the <li> tag. Then, set the display property of #nav-menu > li { to inline-block and the desired result should be visible on hover.

nav {
  height: 70px;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 75px;
}

#nav-logo-link {
  flex: 1;
}

#nav-logo {
  height: 35px;
}

#nav-menu {
  list-style: none;
  padding: 0;
  white-space: nowrap;
}

#nav-menu > li {
  display: inline-block;
  margin: 0 10px;
}

#nav-menu > li > a {
  text-decoration: none;
  color: #000;
}

.nav-menu-item:hover:after {
  content: "\25CF";
  display: block;
  opacity: 1;
  margin-left: auto;
  margin-right: auto;
}
.nav-menu-item::after {
  content: "\25CF";
  opacity: 0;
  color: #1ba9b3;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 5px;
  height: 5px;
}
<nav>
  <ul id="nav-menu">
    <li class="nav-menu-item">
      <a href="ourwork.html">Our work</a>
    </li>
    <li class="nav-menu-item">
      <a href="#whatwedo">What we do</a>
    </li>
    <li class="nav-menu-item">
      <a href="#blog">Blog</a>
    </li>
    <li class="nav-menu-item">
      <a href="#contact">Contact</a>
    </li>
  </ul>
</nav>

To indicate the selected item with a dot, you could use JavaScript to assign the class 

<li class="nav-menu-item selected">
, and then in CSS modify .nav-menu-item:hover:after { to .nav-menu-item.selected:after {

I trust this information proves useful!

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

Centering an image on a webpage using CSS

Here is the code I am using for displaying my image: return <div class="imgContainer"><img src={broomAndText} alt="broomAndText" /></div> In my css file, I have included the following styling: .imgContainer { tex ...

htmlcssreactjs

The edge of the 'parent' element is obscured by the :after element

I am trying to create a transparent outlined button with a shadow in the shape of the button. However, I am facing an issue where the border of the button appears behind the :after element. You can see the problem below. Adding overflow: hidden to the tog ...

htmlcss

What is the process for aligning Item1 to the left and Item2 & Item3 to the right using MUI React?

I'm working on a component that contains three different Typography components. I need to align "summary" to the left, while 'miles' and 'duration' should be aligned to the right. https://i.stack.imgur.com/7e9sY.png Here's t ...

javascriptcssreactjsmaterial-ui

Achieve full width with flexbox column wrap while minimizing the height

How can I arrange elements in columns within a container with a fixed width and variable height, when the number of elements is unknown? My challenge is that I do not know the maximum width of the child elements, preventing me from setting specific column ...

cssflexbox

Ways to set each tinymce editor as standard excluding a few selected ones

Currently, I am utilizing TinyMCE as my text editor for a specific project. Within the header of my codebase, I have specified that all <textarea> elements should be rendered with TinyMCE functionality. By default, these text areas have a height of 3 ...

javascripthtmltinymce

Sending JSON data from the primary window to the secondary window in Electron - A step-by-step guide

I am currently working with a set of 3 files. index.html: ... <a href="#" onclick="fetch(function(data) {console.log(data); subWindow(data)})">subWindow</a> ... The fetch() function retrieves a callback in JSON format. subWindows.js: let m ...

javascripthtmlnode.jsjsonelectron

submitting two contact forms using ajax

Looking to enhance my knowledge of form design... Hello there! I'm currently working with two contact forms on the same page, both utilizing ajax for submissions. Each form functions properly when standalone, but as soon as I integrate them togethe ...

phpjqueryhtmlajaxforms

Handling Website Downtime with PHP Simple HTML DOM Parser

I have been extracting data from a government website for health updates in Turkey. However, if the site experiences downtime or fails to load, my own website stops displaying any content after fetching and parsing the news. Is there a way to optimize th ...

phphtmlparsinghtml-parsingsimple-html-dom

As you scroll, a box blocks off half of the screen

Hey everyone, I could really use your assistance! I'm working on developing a javascript code and here is the idea - if anyone can contribute to it. It's like a social media platform where users enter the site and the is_user_logged_in parameter ...

javascriptjqueryhtmlcss

Collection of categories within the drop-down menu

I'm currently utilizing Twitter Bootstrap and would like to create a collection of concealed fields within a dropdown menu: <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Export <b class="ca ...

htmlcsstwitter-bootstrapdrop-down-menu

Is there a way to programmatically simulate clicking on the "Cancel search" button?

I have a text input field with type "search". In order to perform UI testing, I need to simulate clicking on the "cancel search" button: The code for this specific input field is as follows: <input type="search" value="user"> Although the cancel b ...

javascripthtmlselenium

Is it feasible for nested div to remain unaffected by bleeding when the container is positioned relatively and has an overflow hidden

Is it possible to bleed a nested div even when the container is positioned relative with hidden overflow? In this case, giving the nested div a fixed position is not an option. Please check out this unique example: http://jsfiddle.net/s7nhw/11/. If you ...

cssoverflowcss-positionhtml

Enhancing Image Upload with Ajax/JavaScript: Generating Multiple Previews

I've been experimenting with an Ajax image uploader that I found on this website. Currently, I have managed to create duplicate preview images: one displayed under the input field and the other elsewhere on the page labeled as "this what you chose". H ...

javascriptjqueryhtmlcssajax

I recently edited my htaccess file to redirect my webpage, but now I'm facing issues with my CSS, images, and

Here is the htaccess code I am using: RewriteRule ^example1/([A-Za-z-]+)/?$ example2.php?name=$1 [NC] The page is loading, but the CSS and JS are not rendering correctly. Can anyone assist me in resolving this issue? ...

phphtmlcss.htaccess

Utilize jQuery to extract all values from the second cell of a table and store them in an array

I have a task that involves pushing numbers from text boxes into an array. These text boxes are located in the second cell of each table row, while the third cell contains a date picker. Currently, the code snippet provided retrieves all values from both ...

javascriptphpjqueryhtmlhtml-table

What could be the reason for my new course not being recognized?

Looking to modify the behavior of a button where, when clicked, it hides a specific div element, changes its text display, and toggles between classes using addClass/removeClass for subsequent click events. Unfortunately, the intended functionality is not ...

jquerycsshtml

What steps should be followed to make progress bar function properly?

Currently, I am delving into the world of Angular and attempting to craft a progress bar using a directive: var module = angular.module("app", []); module.directive("progressbar", function () { return { restrict: "A", link: function (s ...

angularjshtmltwitter-bootstrap-3

Adjust the background color of a list item using Typescript

At the top of my page, there's a question followed by a list of answers and the option to add new ones. You can see an example in the image below. https://i.stack.imgur.com/NPVh7.jpg The format for each answer is "(username)'s response: at this ...

htmlangulartypescript

Split the page in half with a background image on one side and text on the other

Is there a way to split the page vertically, with a background image on one side and text on the other? I've been struggling to achieve this layout - the background image won't stay on the left while the text remains on the right. Can someone off ...

htmlcssimagebackgroundbackground-image

Add drop caps to every individual word within a hyperlink

Is there a way to recreate the menu effect similar to using CSS fonts and drop caps for each word? I'm aware of the CSS code: p.introduction:first-letter { font-size : 300%; } that enlarges the first character of the first word, but I want this ef ...

javascripthtmlcsscapitalization