Modificação dinâmica de largura de: antes dos seletores CSS com JQuery

No desenvolvimento web, você pode encontrar cenários em que o conteúdo dinâmico requer ajustes no estilo de pseudo-elementos como :before. Para conseguir isso com JQuery, uma biblioteca javascript popular, siga estas etapas:

Primeiro, assuma as seguintes regras CSS:

.column:before{
    width: 300px;
    float: left;
    content: "";
    height: 430px;
}

.column{
    width: 500px;
    float: right;
    padding: 5px;
    overflow: hidden;
    text-align: justify;
}

Agora, para definir a propriedade width do pseudoelemento :before usando JQuery, você pode anexar um novo elemento de estilo ao cabeçalho do documento:

$('head').append('');

Isso adiciona uma nova regra CSS que substitui a inicial width設定。重要提示是使用 "!important" 来确保新规则优先於现有规则。

Para uma demonstração ao vivo, consulte este URL: [Link de demonstração ao vivo]

Enquanto este método não é específico para pseudo-elementos :before, permite modificar dinamicamente sua largura ou outras propriedades CSS.