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

Retrieve the 'computed' CSS for the entire webpage

We operate multiple websites, each referencing 3-5 CSS files. Some of these files are shared across sites while others are specific to certain pages. Our aim is to streamline the CSS structure by consolidating into fewer files without altering the end res ...

csscode-generation

NodeJS allows for seamless uploading of files

I'm encountering difficulties when trying to upload a file using nodeJS and Angular. I've come across some solutions, but they all involve Ajax which is unfamiliar territory for me. Is there a way to achieve this without using Ajax? Whenever I ...

javascripthtmlangularjsnode.js

Simple user interface height to occupy the entire browser window

Adding Tabs Dynamically ... I am attempting to design a layout using this example ... however, the issue is that the page does not utilize the full height and width of the available space... I have attempted adjusting the width and height to 100% of the ...

jquerycssjquery-easyui

Self-moving button container

I have a challenge involving a button and a sliding div. When the button is clicked, I want the div to slide. The problem arises when I place the button inside the sliding div - it ceases to slide. I understand the issue at hand, but I'm unsure of ho ...

javascriptjqueryhtml

Revamp the UI Framework's CSS to accommodate the latest Web Components

I've implemented Grommet as the UI Framework for my React page. However, I encountered a situation where certain web components, like a web chat control, are not covered by Grommet's CSS. What is the simplest way to style these additional web com ...

cssreactjswebpacksass

Is the phrase "This site was built with Wix" visible on the website?

Recently, I've begun using Wix to build a website. I'm curious - does the message 'This website is created using Wix' appear at the top and bottom of the page when it's published? 'This website is created using Wix' I ...

html

Leveraging ASP.NET MVC 5 to integrate an online document viewer from Office 365, seamlessly displaying Word documents within a sleek, compact window

We have been struggling to showcase a Word document (.docx) within an iframe on our website using the Office 365 service. The document is stored in One-Drive for business online and has been appropriately shared. After signing in, we obtained a link to the ...

javascripthtmlasp.net-mvciframeoffice365

Determining the offsetWidth and scrollWidth for option elements within a select field containing the multiple attribute on Internet Explorer 11

My select input element has multiple attributes and a fixed width set. Unfortunately, due to the fixed width, the overflowing content in the x-direction is not visible. To address this issue, I have created a JavaScript function that uses the title attribu ...

javascripthtmlcss

The modal window does not display a scroll bar

I'm currently facing an issue where the scroll bar is not appearing on my page when more elements are added. In addition, I have a modal that covers the entire page when clicking on an item. However, changing the CSS position: fixed property affects ...

javascripthtmlcssreactjs

Are there any CSS hacks available to address the combination of position: sticky and overflow within the parent element?

I've encountered a sticky position issue when the overflow property is set to auto on a parent element. I've tried various solutions like adding an extra wrapper or using clip instead of auto, but none have worked. While I did find a solution usi ...

javascripthtmlcssreactjs

Incorporating an image as a clickable element instead of a traditional button using HTML and

Here's the issue at hand: I currently have "+" and "-" icons at the end of each row to add and delete rows as needed. However, I would like to replace the "-" icon with a trashcan symbol instead. I attempted to do this by replacing it with an image s ...

javascriptjqueryhtmlcssgrails

Create an interactive musical experience on a webpage using HTML

I'm a newcomer to web technology and I'm trying to dynamically play a music file using Python Django HTML. I have saved the file location in the database and am fetching it. <audio control><source src= {{track.songlocation}} type="audio ...

htmldjangopython-2.7

Tips for keeping two divs aligned horizontally on a webpage

Currently diving into the world of Bootstrap 5, I am facing a challenge with keeping my links and the label "Testing" on the same line. Despite using text-start and text-end classes, they refuse to cooperate. How can I ensure that they both stay aligned ho ...

cssbootstrap-5

reveal one div and conceal another using Bootstrap's collapse feature

I'm not sure why it's not working. Maybe I missed some simple thing? I want to show one div when I use an icon, then hide the other div. Currently, if I click on the first icon, a div will show. But if I click on the second icon, the div will sh ...

htmlcsstwitter-bootstrap

Rotating Images in Query and Chrome

My script for rotating images is functioning well in various browsers, however, it seems to be experiencing issues specifically with Google Chrome. In order to address this problem, I attempted a CSS3 workaround. Unfortunately, I have encountered difficul ...

jqueryimagecssrotation

"Entering a text message will prompt the appearance of the on-screen keyboard in capital

Our website is optimized for use on Android tablets. I have added the following CSS to the input's class: text-transform: uppercase; While this successfully displays typed letters in uppercase, it does not change the appearance of the on-screen keyb ...

asp.net.nethtmlcsshtml-input

Live Server in VS Code not refreshing automatically as expected

My problem is with VS Code and Live Server for HTML CSS. I expected the page to automatically reload after editing my HTML, but that's not happening. Even though I have Auto-Save enabled, Live Server isn't updating or refreshing my page automati ...

htmlcssvscode-extensionsliveserver

Creating a responsive website that utilizes YAML and is optimized for extremely narrow screen widths

I have noticed that my responsive design using YAML is working well for the most part. However, on screens with very small widths, the YAML grids become extremely tiny. In such cases, it would be more practical to have the right grid displayed below the le ...

cssresponsive-designyaml-css

Build a Container Div using DOM/XPATH techniques

I have just initialized a new DOM XPATH OBJECT. After performing several operations, I saved my result using SaveHtml $String[] = $dom->saveHTML(); Next, I placed the content into a file. file_put_contents($filename, $string); The HTML Structure l ...

phphtmldomxpath

Refreshing an iframe located on disparate domains

There is a webpage called "main.jsp" within the domain "domain1". This page contains an iframe that loads content from another domain known as "domain2". Essentially, "main.jsp" serves as a common content platform, with the iframe displaying content from v ...

javascripthtmljspiframe