Placing a forward slash only after the initial hyperlink within a list item

I'm trying to add a slash after the first link in my UL, but instead, it's adding a slash after every link. I've attempted various solutions without success.

Here is my current view/html code:

    <?php foreach ($this->config->item('languages') as $i => $language): ?>

    <li class="language-nav__item"<?php if ($i == 0): ?> <?php elseif ($i == sizeof($this->config->item('languages'))-1): ?><?php endif; ?>>
        <a class="language-nav__link" href="<?php echo base_url() . $language['alias'] . '/' . $pages[$view]->{'url_' . $language['language']}; echo ($view == 'home')? '' : str_replace('/' . $this->uri->segment(1), '', uri_string()); ?>">
            <?php echo $language['name']; ?> 
        </a>
    </li>
    <?php endforeach; ?>
</ul>

This section displays two links/languages.

Next, in my CSS file:

.language-nav a:nth-child(1):before { 
  content: "/";
  color: white;
}

After applying this styling, a slash is shown after each link. When targeting it like this:

.language-nav li:nth-child(1):before { 
  content: "/";
  color: white;

}

A slash is added AFTER the last link rather than after the first one (in the middle where it should be). What am I missing here? Thank you.

Answer №1

It appears that the initial focus was on the first child within the li elements themselves.

Here is a revised approach to consider:

li:first-child a:after {
  content: "/";
}
<ul>
  <li>
     <a class="language-nav__link" href="#">
         English
     </a>
  </li>
  <li>
      <a class="language-nav__link" href="#">
         Spanish
      </a>
  </li>
  <li>
      <a class="language-nav__link" href="#">
         Chinese
      </a>
  </li>
</ul>

This will target the link element within the first li (specifically, the first-child of the ul).

EDIT - alternatively, to place the slash outside of the anchor:

li:first-child:after {
      content: "/";
    }
<ul>
  <li>
    <a class="language-nav__link" href="#">
      English
    </a>
  </li>
  <li>
    <a class="language-nav__link" href="#">
      Spanish
    </a>
  </li>
  <li>
    <a class="language-nav__link" href="#">
      Chinese
    </a>
  </li>
</ul>

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

What are some ways to optimize a range slider for touch screen usage?

I'm currently working on a small project and encountering an issue where the animation duration of an element needs to be changed using a range slider. The functionality works fine on desktop screens but doesn't seem to work on mobile devices. ...

Unable to get CSS Filter to function properly in Firefox

I'm having trouble with the CSS filter on my Firefox (15.0) browser. Here is the HTML code: <div class="google"> <img src="https://www.google.com/images/srpr/logo3w.png"> </div> And here is the CSS code: .google{ -moz ...

Is it possible to manipulate CSS on a webpage using javascript?

I have incorporated this piece of JavaScript to integrate a chat box onto my website: window.HFCHAT_CONFIG = { EMBED_TOKEN: "XXXXX", ACCESS_TOKEN: "XXXXX", HOST_URL: "https://happyfoxchat.com", ASSETS_URL: "https://XXXXX.cloudfront.ne ...

Testing Angular Reactive Forms: Synchronizing HTML and Control values mismatch

I have been diligently following the Angular reactive form unit testing tutorial here, but I continue to struggle with keeping the control value and HTML value in sync. Below is how I've implemented it; note that I am trying to use setValue along with ...

Mastering the application of map, filter, and other functions in Angular using Observables

After creating this Observable: const numbers$:Observable<any>=Observable.create((observer)=>{ for(let i=0;i<5;i++) observer.next(i); }) I attempted to use map and filter as shown below: numbers$.pipe(map(x=>{x+110})).subscr ...

When trying to submit a form, encountering an `Uncaught ReferenceError` due to calling ajax within

Attempting to trigger an ajax function within a form in order to retrieve a value for the dropdown. mypython.py @app.route('/new_data', methods = ['POST', 'GET']) def new_data(): #Filter data and return the data(data_lis ...

Adjust the code to enhance the functionality of web components in Sharepoint

I recently came across some code online that I'm trying to modify in order to add an expanding button next to a web part on my Sharepoint site. However, the problem is that by default, all web parts are already expanded and require a click to collapse ...

necessitated in specified input with assigned value

Here is some code I have: <!DOCTYPE html> <html> <body> <form action="/action_page.php"> <select required> <option value=1>Volvo</option> <option value=2>Saab</option> <option value=3>Merc ...

Having trouble locating an element with Xpath using Selenium Web Driver? Any suggestions for a more efficient way to find this elusive element?

Selenium Web Driver- I'm having trouble locating an element using Xpath. Any suggestions on a better way to locate the element below? <div class="gwt-Label">Declined</div> I attempted to retrieve the text in the element using the followi ...

Is there a way to combine all the text on an HTML page into one continuous string without losing the CSS styling?

If I want to change all the text within every HTML element on a page to just the letter "A", how would I do it? Let's say I have a webpage set up like this: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

What is the best way to implement Bootstrap in Coda2?

I am new to web design and I am trying to incorporate Bootstrap into my HTML code using Coda2. Since I don't have access to a server, I am referencing the directory address of CSS files on my hard drive instead of a web address. Currently, the beginni ...

Locating a button using XPath on Selenium

I have been struggling to find the specific button using Selenium WebDriver: <div class="_1gw6tte"> <div aria-hidden="false"> <div class="_159vfsnv" style="background-color: transparent;"& ...

Adjust the background color of a specific list item when hovering over another list item

My dilemma lies in my inadequate knowledge to solve this issue: I have a dropdown menu embedded within a website. (View screenshot here: [SCREENSHOT]) The desired outcome is for the background color of an icon on the main list to change when I navigate to ...

Tips for manually adding CSS/JS files for offline usage with Vue.js CLI

I am currently utilizing Vue.js CLI alongside AP.NET Core in a single-page application. I have identified the need to bundle some JavaScript/CSS files locally instead of relying on a CDN due to potential deployment scenarios without internet access. The co ...

The AJAX functionality seems to have broken following the switch from php5 to php7

When I initially wrote my code in php5, the index page would make an ajax call to check if $_SESSION['user'] was stored. If a session existed, the user's information would be displayed; otherwise, the page would redirect to the login page. H ...

The issue with rendering CSS styles from <style></style> tags in Visual Studio while debugging in VB is causing a problem

<style> #ctrtable{width:600px;margin-left:auto;margin-right:auto;} </style> For the purpose of centering a table on the viewport, the above style block is added to the web page.   While using Visual Studio 2013 Express in debug mode, t ...

Inline-block elements within other inline-block elements may not wrap correctly

Perfect Solution from Oriol: Oriol provided a great solution to my issue. Instead of using inline-block on both containers, he suggested floating the first container and leaving the second container with no styling. Additionally, he recommended using overf ...

Tips for setting the height of a div within a td to be 100%

I am struggling to make the orange divs in this example stretch out to match the height of the enclosing td element without explicitly setting the parent's height. I have tried using display: flex and align-items: stretch, but I can't seem to ach ...

The Facebook comment section is taking control

<div class="fb-comments" data-href="https://www.facebook.com/pages/Societ%C3%A0-Ginnastica-Triestina-Nautica/149520068540338" data-width="270" data-num-posts="3"> I'm having trouble with the comment box extending past my div height and overlapp ...

Having difficulty with the placement of a div element in HTML code, wondering how to position it according to my specific

As a beginner, I ran into some trouble with my code while trying to create a simple 'game' for fun. The initial result looked like this. After that, I attempted to add another div onto the brown element using the following CSS: #energy_and_coins ...