seo Question posted in
Some basic information to get you started with this can be found here.

How to hide a specific text inside a <li></li> element using css? – SEO

I have a theme about rentals. The search engine is listing the cities, but when im adding a city, the name and the slug must be same. But for a better SEO, I need to add a prefix like “Detroit-cheap-rentals”

So I must write the city name and the city slug same. In this situation the search engine is looking like “Detroit Cheap Rentals”

I want to get rid of the “Cheap rentals” part with the css so the slug can still be detroit-cheap-rentals.

How can I do this with css?

In this picture, the part I want to delete with css is “Kiralık Villa”
check the picture here please

Tags:

5

Answers


  1. 0

    You can add a class to the li tag and hide it with display:none;

    Example HTML:

    <ul>
    <li>Number 1</li>
    <li class="hidden">Number 2</li>
    <li>Number 3</li>
</ul>

    Example CSS:

    .hidden {
    display:none;
}
    Login or Signup to reply.
  2. 0

    use li[data-value="Kiralık Villa"]

    if you want to hide with “save” the place use visibility: hidden; if not use display:none

    Learn here the difference between visibility:hidden and display:none:

    li[data-value="Kiralık Villa"]{
    visibility: hidden;
}
    <ul>
<li data-value="Kiralık Villa">Kiralık Villa</li>
<li data-value="other">other</li>
</ul>

    To your comment hide part of text:

    Set width and white-space: nowrap;
    overflow: hidden;

       li[data-value="Kiralık Villa"]{
    width: 83px;
    white-space: nowrap;
    overflow: hidden;
    }
    <ul>
 <li data-value="Kiralık Villa">Kiralık Villa and more text</li>
 <li data-value="other">other</li>
</ul>
    Login or Signup to reply.
  3. 0

    I don’t think this is possible with pure css, css has first-line, and first-letter selectors, but it is not possible unless you are able to modify the html..
    so you can add

    <li>Detroit <span class="hidden">Cheap Rentals</span></li>

    css 

    .hidden {
  display:none;
}

    Or the many other solutions that were already presented..
    Another idea would be using js, here a good start.. http://www.dynamicsitesolutions.com/javascript/first-word-selector/?path2=/javascript/first-word-selector/

    Login or Signup to reply.
  4. 0

    As I understand, you want to show only the content of the data-value in the visible text on each <li> item?

    You could do it like this, which will hide the existing text, and show the content of the data-value instead. 

    li{
visibility:hidden;
display:block;
max-width: 100px; /* this should be the available width you have in the dropdown box */
overflow-x:hidden;
}
li:before{
visibility:visible;
display:inline-block;
content:attr(data-value);
}
    <ul>
<li data-value="Detroit">Detroit something</li>
<li data-value="Fethiye">Fethiye Kiralık Villa</li>
</ul>
    Login or Signup to reply.
  5. 0

    Example of HTML:

    <li>Detroit <br>Cheap Rentals</li>

    Example of CSS:

    li {
    height: 20px;
    overflow: hidden;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search