Como adicionar um sublinhado pontilhado abaixo do texto HTML

95

Como você sublinha o texto html para que a linha abaixo do texto seja pontilhada em vez do sublinhado padrão? De preferência, gostaria de fazer isso sem usar um arquivo CSS separado. Sou um novato em html.

html underline parapeito
fonte
13
Por que você não pode usar CSS? Talvez crie a página como uma imagem e adicione a linha com mspaint?
epascarello
Eu não acho que isso pode ser feito sem CSS
Cfreak
Você tem que usar css, mas pode ser feito usando imagens de fundo, a parte inferior da borda é a melhor abordagem
criação do reino
4
Caras. Acho que ele disse "sem usar um arquivo CSS separado", não "sem CSS". Adore os novatos.
Stefan Reich

Respostas:

137

É impossível sem CSS. Na verdade, a <u>tag é simplesmente adicionar text-decoration:underlineao texto com o CSS integrado do navegador.

Aqui está o que você pode fazer:

<html>
<head>
<!-- Other head stuff here, like title or meta -->

<style type="text/css">
u {    
    border-bottom: 1px dotted #000;
    text-decoration: none;
}
</style>
</head>
<!-- Body, content here -->
</html>
Alfred Xing
fonte
No seu <head>elemento, adicione uma <style>tag (editei minha resposta)
Alfred Xing
2
você também pode tentar em dottedvez dedashed
Brian Burns
Boa solução e é possível. Não me faça codificar js para isso;)
Ahmet Can Güven
Aqui está a resposta com suporte de texto de várias linhas stackoverflow.com/a/4365458/1078641
eletróide
30

Use os seguintes códigos CSS ...

text-decoration:underline;
text-decoration-style: dotted;
Shakeel Ahmed
fonte
3
Esta deve ser a resposta aceita. Seguindo o modelo da caixa, o uso de um pontilhado borderserá colocado fora paddinge, portanto, distante do texto.
Ryan Walker
2
Há uma sintaxe curta: text-decoration: underline #000 dotted;onde o primeiro atributo é linha, o segundo é cor e o terceiro é estilo.
Sos Sargsyan
Obrigado Sos pela melhoria
Shakeel Ahmed
15

Sem CSS, você basicamente está preso ao uso de uma tag de imagem. Basicamente, faça uma imagem do texto e adicione o sublinhado. Isso basicamente significa que sua página é inútil para um leitor de tela.

Com CSS, é simples.

HTML:

<u class="dotted">I like cheese</u>

CSS:

u.dotted{
  border-bottom: 1px dashed #999;
  text-decoration: none; 
}

Exemplo de execução

Página de exemplo

<!DOCTYPE HTML>
<html>
<head>
    <style>
        u.dotted{
          border-bottom: 1px dashed #999;
          text-decoration: none; 
        }
    </style>
</head>
<body>
    <u class="dotted">I like cheese</u>
</body>
</html>
Epascarello
fonte
9

O elemento HTML5 pode fornecer um sublinhado pontilhado, de modo que o texto abaixo terá uma linha pontilhada em vez de um sublinhado regular. E o atributo title cria uma dica de ferramenta para o usuário quando ele passa o cursor sobre o elemento:

NOTA: A borda / sublinhado pontilhado é mostrado por padrão no Firefox e Opera, mas IE8, Safari e Chrome precisam de uma linha de CSS:

<abbr title="Hyper Text Markup Language">HTML</abbr>
Fatima Waheed
fonte
Essa é a resposta correta. Curto e sem CSS. Obrigado.
Saeed Ahadian
4

Se o conteúdo tiver mais de 1 linha, adicionar uma borda inferior não ajudará. Nesse caso, você terá que usar,

text-decoration: underline;
text-decoration-style: dotted;

Se você quiser mais espaço para respirar entre o texto e a linha, basta usar,

text-underline-position: under;
Darshana Gunawardana
fonte
3

Reformatada a resposta de @epascarello :

u.dotted {
  border-bottom: 1px dashed #999;
  text-decoration: none;
}
<!DOCTYPE html>
<u class="dotted">I like cheese</u>
Expandir trecho

anatoly techtonik
fonte
0

Você pode usar a borda inferior com dottedopção.

border-bottom: 1px dotted #807f80;
Neel
fonte
0

Você pode tentar este método:

<h2 style="text-decoration: underline; text-underline-position: under; text-decoration-style: dotted">Hello World!</h2>

Por favor, note que sem text-underline-position: under;você ainda terá um sublinhado pontilhado, mas esta propriedade lhe dará mais espaço para respirar.

Isso pressupõe que você deseja incorporar tudo dentro de um arquivo HTML usando um estilo embutido e não usar um arquivo CSS ou tag separado.

Mona Jalal
fonte
-2

Não é impossível sem CSS. Por exemplo, como um item de lista:

<li style="border-bottom: 1px dashed"><!--content --></li>
Davington III
fonte
6
É impossível sem CSS. O styleatributo é simplesmente uma forma de aplicar propriedades CSS diretamente a um elemento. Consulte os documentos MDN sobre o atributo de estilo.
mirichan 01 de
Adicionar CSS dessa forma é uma maneira de pensar efetivamente sobre o estilo html. Claro que você pode argumentar que não existe tal coisa, mas para um método fácil de descrever, esta é uma solução possível.
Davington III de
Porém, ainda é CSS, e a preferência real dada era não ter um arquivo separado. A melhor maneira de resolver o problema com essa restrição é <style>. Os estilos embutidos devem ser usados ​​com bastante moderação.
mirichan
Bem, na época em que criei esse post foi porque tive que usar estilos embutidos. Pareceu valer a pena observar essa possibilidade para outros, apenas no caso de eles não terem pensado nisso, não é realmente um tópico apropriado para guerra e paz ... Eles provavelmente encontraram o que precisavam e nossas sugestões estão lá para aqueles e quaisquer outros que possam preciso deles, quando posto no trabalho eu não levo em conta alguém apontando algo já óbvio sobre a sugestão quando é uma sugestão e não um "você deve fazer assim" então sim tome um comprimido frio mano :)
Davington III
1
Você confunde minhas intenções. Eu estava fazendo uma observação técnica relevante para a pergunta feita. Eu não tinha intenção de chamá-lo para fora, e peço desculpas por ter vindo dessa maneira.
mirichan