Uma greve é ​​definida como uma linha através do texto. É comumente usado para mostrar texto irrelevante, mas também podemos utilizá -lo para decoração. Versões iniciais do elemento usado HTML para fazer um texto atingindo. No entanto, o HTML5 não suporta o elemento. Mais especificamente, no CSS, o “decoração de texto”O valor da propriedade é definido como“linha de linha”Para o mesmo propósito.

Este artigo o guiará sobre o CSS Strikethrough e as outras propriedades de decoração de texto. Então vamos começar!

O que são propriedades CSS de decoração de texto?

Existem muitos "decoração de textoValores de propriedades usados ​​no CSS. Alguns deles estão listados abaixo:

• linha de linha
• sublinhado
• Overline
• nenhum

Vamos analisá -los um por um!

Decoração de texto: linha de linha

O "linha de linha”A propriedade de decoração de texto é usada para adicionar uma linha horizontal através do texto. Esta propriedade também é conhecida como texto cruzado.

Exemplo 1: Como usar o CSS Strikethrough?

Primeiro, adicionaremos um nomeado “recipiente”Dentro do elemento corporal do arquivo html. Então, inclua o

tag para adicionar algum texto.

Html

Decoração de texto: Strikethrough

Na seção CSS, atribua o valor da propriedade de decoração de texto como “linha de linha”.

CSS

Decoração de texto: linha de linha;

Pode-se observar que a propriedade de linha é aplicada com sucesso ao texto adicionado:

Para tornar essa decoração mais interessante, vamos aplicar alguma animação a ela.

Exemplo 2: Como aplicar a animação em Strikethrough com CSS?

Adicione um elemento div dentro do elemento corporal do arquivo html. Dentro da div, coloque um título

Tag com algum texto.

Html

Bem -vindo ao Linuxhint!

Em seguida, aplique estilos aos elementos HTML.

CSS

Os elementos HTML são estilizados com propriedades CSS. Para definir o alinhamento de texto no centro, o elemento Div é fornecido com o alinhamento de texto da propriedade com o Centro de Valor:

div
Alinhamento de texto: centro;

Linha de estilo div

.linha
Font-Family: Sans-Serif;
Size da fonte: 60px;
Cor: #00154f;
Posição: relativa;
Exibição: bloco embutido;
Cursor: Ponteiro;

As propriedades do CSS aplicadas à linha DIV são explicadas abaixo:

• ““família de fontes”Propriedade define a família de fontes do texto como“sem serifa”.
• ““tamanho da fonte”Propriedade com valor“60px”Define o tamanho da fonte para 60px.
• ““cor”A propriedade é utilizada para especificar a cor do texto.
• ““posição"Com valor"relativo”Ajusta a divisão da linha em relação à sua posição atual.
• ““mostrar”Propriedade como uma“Block inline”Permitirá a largura da linha de definição e restringirá o conteúdo a ser exibido na próxima linha.
• ““cursor"Com o valor"ponteiro”Especifica que, quando o mouse paira sobre o texto, um cursor de mão apontador será exibido.

Div da linha de estilo após seletor

O código abaixo do rodoviário irá estilizar a linha da linha depois de ser selecionada. O "::depois”É conhecido como seletor após o seletor:

.linha :: depois
contente: ";
exibição: bloco;
largura: 0;
Altura: 20px;
Background-Color: #f4af1b;
Posição: Absoluto;
Inferior: 10%;
Z -Index: -1;
transição: largura 1s;

Depois que a linha for selecionada, as propriedades mencionadas serão aplicadas conforme explicado:

• ““contente”A propriedade é utilizada para inserir o conteúdo especificado no elemento. Se o valor não for, após a seleção, o conteúdo será definido de acordo com o código pseudo -mencionado.
• ““mostrar”Como um bloco leva a largura da tela disponível e define o bloco para começar em uma nova linha.
• ““largura”A propriedade é utilizada para definir a largura do elemento.
• ““altura”A propriedade é utilizada para definir a altura do elemento.
• ““cor de fundo”A propriedade é utilizada para definir a cor de fundo do elemento.
• ““posição“Como absoluto se refere que a linha div em relação à sua divis.
• ““fundo”A propriedade adiciona 10% de espaço na parte inferior da linha.
• ““Z-Index”Define a ordem dos elementos sobrepostos.
• ““transição”Propriedade define o movimento do elemento em que o valor da largura representa a transição que precisa ser aplicada na propriedade de largura de um elemento, e 1s é sua duração.

Linha de estilo div após o mouse

Defina a largura do contêiner de linha como 100% quando o mouse estiver pairando nele:

.Linha: Hover :: After
largura: 100%;

Como resultado, pairar sobre o texto adicionado adicionará uma estriada animada:

Decoração de texto: sublinhado

O "sublinhado”O valor da propriedade de decoração de texto colocará uma linha sob o texto. Esta propriedade é utilizada principalmente para tornar o texto necessário proeminente.

CSS

Decoração de texto: sublinhado;

Saída

Decoração de texto: Overline

A decoração Overline refere -se ao texto com uma linha horizontal sobre ela. Também é conhecido como uma barra. Mais especificamente, para fazer com que um texto exagerasse, atribua o “decoração de texto”Propriedade um valor“Overline”.

CSS

Decoração de texto: Overline;

Ao atribuir o valor excessivo, pode -se observar que uma barra é mostrada sobre o texto:

Decoração de texto: Nenhum

Se você não precisar de nenhuma decoração de texto, atribua o valor “nenhum" para o "decoração de texto" propriedade.

CSS

Decoração de texto: Nenhum;

Saída

Até agora, discutimos as propriedades da decoração de texto, a linha, sublinham, superline e nenhum com exemplos. A próxima seção discutirá os valores do atributo de decoração de texto. Então vamos!

Valores do atributo de decoração de texto

Você pode utilizar também adicionar outros valores de atributo:

• linha de decoração de texto: Ele define o tipo de linha como sublinhado, linha de linha, superline e mais.
• cor de decoração de texto: Ele define a cor da linha.
• estilo de decoração de texto: Especifica o estilo da linha, seja ondulado, pontilhado, tracejado, etc.
• Decoração de texto-espessura: Define a largura da linha.

Veja o exemplo abaixo, que mostra a decoração de texto com vários valores discutidos acima.

Exemplo

Em primeiro lugar, adicione uma linha pontilhada sobre o texto com largura de 10px e a cor especificada:

Decoração de texto: Overline pontilhado 10px #00154f;

Em seguida, um ondulado sublinhado com a largura e a cor necessárias:

Decoração de texto: sublinhado ondulado 9px RGB (249, 253, 2);

As linhas de código CSS acima fornecidas mostrarão os seguintes resultados:

Fornecemos as informações relacionadas ao CSS Strikethrough e outras propriedades de decoração de texto.

Conclusão

As propriedades de decoração de texto do CSS definem a aparência de diferentes linhas decorativas no texto adicionado. Mais especificamente, a Strikethrough adiciona uma linha através do texto que pode ser aplicado definindo o valor da decoração de texto como “linha de linha”. Este post discutiu o CSS Strikethrough, outras propriedades de decoração de texto e valores de atributo.