Как скользить строки в CSS?

Question

https://imgur.com/a/V2W5jTZ (если вы не видите изображение) Когда я щелкаю по одному заголовку, должна появиться строка, но когда я щелкаю по другому заголовку, я хочу, чтобы линия переместилась к следующему заголовку.

Я уже создал один и тот же навигатор меню для каждого заголовка (страницы), и я просто отображаю строку под открытой страницей

Ex: Код курса

<p class="content">
    <a href="about.html" class="about">About Us</a>
    <a href="position.html" class="pos">Position</a>
    <a href="commerical.html" class="comm">Commerical Projects</a>
    <a href="residential.html" class="house">Residential Projects</a>
</p>

После настройки все того же css я использовал hr следующим образом:

hr{
    position: absolute;
    top: 100px;
    right: 168px;
    width: 240px;
    border-color: red;
}

Answer 1

Вы можете использовать псевдо-классы CSS, чтобы показать подчеркивание для активного элемента (тег привязки). Существуют разные состояния псевдоклассов, такие как активный, зависание, фокус и т. Д.

Скорее всего, вы можете использовать фокус-класс для решения вашей проблемы. (active и hover также могут использоваться для обработки различных сценариев)

Вот пример решения вашей проблемы

a {
    text-decoration: none;
}

a:focus {
    border-bottom: 1px solid red;
}

также вместо text-decoration: underline; вы можете использовать border-bottom: 1px solid red;, что более ясно в строке.

Вот полный код CSS, который может помочь вам лучше понять решение:

/*To hide the default behaviour of <a> tag*/
a {
    text-decoration: none;
}

/***By using text-decoration: underline;***/
/* a:active, a:focus, a:hover {
    text-decoration: underline;
} */

/***To handle different cases***/
/* a:active, a:focus, a:hover {
    border-bottom: 1px solid red;
} */

/***Final solution - to handle your requirement***/
a:focus {
    border-bottom: 1px solid red;
}

Вы также можете использовать закомментированный код, раскомментировав его для проверки различных сценариев.

Answer 2

Я бы рекомендовал написать класс CSS с желаемым стилем, который вы примените к

вам понадобится некоторый java-скрипт для применения класса к элементу при нажатии, но вот пример, чтобы вы начали

https://www.w3schools.com/howto/howto_js_active_element.asp

Answer 3

p a {
  font-family: sans-serif;
  text-decoration: none;
  color: gray;
  position: relative;
  margin: 10px 0;
  display: inline-block;
  padding: 12px 10px;
}

p a::after {
  content: "";
  background: blue;
  height: 1px;
  position: absolute;
  bottom: 0;
  transition: .16s all 0.025s;
}

p a::after {
  left: 100%;
  right: 0;
}

p a:hover ~ a::after {
  left: 0;
  right: 100%;
}

p a:hover::after {
  left: 0;
  right: 0;
}

<p class="content">
    <a href="about.html" class="about">About Us</a>
    <a href="position.html" class="pos">Position</a>
    <a href="commerical.html" class="comm">Commerical Projects</a>
    <a href="residential.html" class="house">Residential Projects</a>
</p>

попробуйте это:)

Answer 4

Вот, пожалуйста, попробуй это:)

* {
  box-sizing: border-box;
}

body {
  font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}

.container {
  width: 50%;
  margin: 0 auto;
}

ul li {
  display: inline;
  text-align: center;
}

a {
  display: inline-block;
  width: 25%;
  padding: .75rem 0;
  margin: 0;
  text-decoration: none;
  color: #333;
}

.two:hover ~ hr {
  margin-left: 25%;
}

.three:hover ~ hr {
  margin-left: 50%;
}

.four:hover ~ hr {
  margin-left: 75%;
}

hr {
  height: .25rem;
  width: 25%;
  margin: 0;
  background: tomato;
  border: none;
  transition: .3s ease-in-out;
}

<div class="container">
  <ul>
    <li class="one"><a href="#">About Us</a></li><!--
 --><li class="two"><a href="#">Position</a></li><!--
 --><li class="three"><a href="#">Commerical Projects</a></li><!--
 --><li class="four"><a href="#">Residential Projects</a></li>
    <hr />
  </ul>
</div>

Answer 5

Вы можете использовать что-то вроде этого

$(document).ready(function() {
  var $slider = $('nav .slider'),
    width = $('nav ul li').width;
  $slider.width(width);
});
$(window).resize(function() {
  var $slider = $('nav .slider'),
    width = $('nav ul li').width,
    $isActive = $('nav ul li.isactive'),
    isX = $isActive.position().left,
    isW = $isActive.width();
  $slider.width(width);
  $('nav ul li').each(function() {
    var x = $(this).position().left,
      w = $(this).width();
    $(this).on({
      mouseenter: function() {
        $slider.css({
          left: x,
          width: w
        });
      },
      mouseleave: function() {
        $slider.css({
          left: isX,
          width: isW
        });
      }
    });
  });
}).resize();

*,
*:before,
*:after {
  box-sizing: border-box;
}

a {
  color: #ea3830;
  text-decoration: none;
}

nav {
  position: relative;
  width: 100%;
  max-width: 960px;
  min-width: 400px;
  height: 50px;
  margin: 25px auto;
  border-bottom: 3px solid #eee;
  text-align:center;
}

nav .slider {
  position: absolute;
  bottom: 0;
  width: 25%;
  height: 3px;
  box-shadow: 0 3px #ea3830;
  transition: all 0.3s ease-in-out;
}

nav ul {
  padding: 0;
  height: 50px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: center;
}

nav ul li {
  width: 25%;
  height: 50px;
  flex: 25%;
  line-height: 50px;
  list-style: none;
}

nav ul li a {
  padding: 0 25px;
  display: block;
  font-weight: 600;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <div class='slider'></div>
  <ul>
    <li class='isactive'>
      <a href='#'>Index</a>
    </li>
    <li>
      <a href='#'>About</a>
    </li>
    <li>
      <a href='#'>Work</a>
    </li>
    <li>
      <a href='#'>Contact</a>
    </li>
  </ul>
</nav>

Answer 6

Вы можете проверить эту ссылку для деталей о том, как ее построить: https://codepen.io/arjunamgain/pen/lGALt

Это должно быть достаточно для достижения желаемой функциональности. Вместо красного фона в разделе css просто используйте правило границы, например:

border-bottom: 4px solid #d90000;