Содержание

html — Как сделать outline для ссылок ‘a’ вокруг текста разной длины

Вопрос задан

Изменён 5 месяцев назад

Просмотрен 120 раз

Хочу задать ссылкам a :focus с outline вокруг текста, но outline выходит длиннее, чем текст с правой стороны. Я пытался исправить это путем добавления определенной ширины width, но у каждой ссылки текст совсем разной длины и поэтому это не помогает. Как можно это исправить? Код приведен ниже

.contacts-item-link {
  display: block;
  font-size: 25px;
  line-height: 180%;
  color: #000;
}
.contacts-item-link:focus {
  outline: 1px solid #71A7E2;
}
.contacts-item-link:hover {
  color: #71A7E2;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.
 
 0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
<main>
              <a href="tel:79876543210">
                +7 (987) 654-32-10
              </a>
              <a href="tel:71234567890">
                +7 (123) 456-78-90
              </a>
              <a href="mailto:example@example.com">
                example@example.com
              </a>
              <a href="mailto:support@example.com">
                support@example.com
              </a>
</main>
</body>
</html>
  • html
  • css
  • width
  • focus
  • outline

По умолчанию ссылки имеют обводку по ширине текста, так как у них свойство display установлено в inline. Но, Вы задали этому свойству значение block (предполагаю, чтобы ссылки были каждая с новой строки), разрешая растягиваться на всю доступную ширину.

Ссылки или не трогаем или задаём значение inline-block, а выравниваем в колонку через display: flex у родителя :

. main {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
}
.contacts-item-link {
  display: inline-block;
  font-size: 25px;
  line-height: 180%;
  color: #000;
}
.contacts-item-link:focus {
  outline: 1px solid #71A7E2;
}
.contacts-item-link:hover {
  color: #71A7E2;
}
<main>
  <a href="tel:79876543210">+7 (987) 654-32-10</a>
  <a href="tel:71234567890">+7 (123) 456-78-90</a>
  <a href="mailto:example@example.com">example@example.com</a>
  <a href="mailto:support@example.com">support@example.com</a>
</main>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Длина рамки CSS — Stack Overflow на русском

Вопрос задан

Изменён 7 месяцев назад

Просмотрен 47k раза

Есть рамка вокруг текста

border-top: 1px solid #000; 
border-bottom: 1px solid #000; 
padding: 5px;

Как сделать рамку длиннее или наоборот?

1

Не совсем понятно, что именно вам нужно.

  • border-top: 1px solid #000; — верхняя часть рамки толщиной в 1px цвета #000
  • border-bottom: 1px solid #000; — нижняя часть рамки 1px цвета #000
  • padding: 5px; — внутренний отступ (отступ от текста внутри рамки до самой рамки) 5px

Длина же задается параметром width (высота — height). Например:

width 100px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
padding: 5px;

Возможно, вам поможет эта статья или эта.

1 

width: 200px;

? 🙂

С помощью border такого не сделаешь, она либо на всю длину либо никак. Поробуйте сделать так:

div{position:relative;}
div:before{
    position:absolute;
    top:0;
    left:0;
    width:50%;
    border-top:1px solid #000;
    content:"";
}

Попробуйте так

border: 1px solid #000;
padding: 0 60px 0 0;

span {
  border: 1px solid red;
}

span.
 
 long {
  padding: 0 2em;
}

span.long-2 {
  padding: 0 2em;
  margin: 0 -2em;
}
<p>Как сделать <span>рамку</span> длиннее?</p>
<p>Как сделать <span>рамку</span> длиннее?</p>
<p>Как сделать только <span>рамку</span> длиннее?</p>

Интересно а 10 лет назад были псевдо элементы ::before; ::after? Можно было было бы так:

.parent-element {
    display: flex;
    width: 1200px;
    height: 500px;
    &::after {
        content: '';
        width: 800px;
        margin: 0 auto;
        height: 1px;
        border: 0.5px solid black;
    }
}

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как удалить и оформить рамку вокруг полей ввода текста в Google Chrome

В Google Chrome поля формы, такие как ,