css擬似要素がメイン要素からCSSを保持しないようにするにはどうすればよいですか？

Question

私はcssを使って要素の前後に中括弧を追加したいという奇妙な問題があります。中括弧は実際にHTMLには存在しないので、前後の中括弧を追加するためにCSS疑似要素を使用しています。私の問題は、疑似要素がメインCSSセレクタからCSSスタイルを取っていることです。中括弧に下線、ストライクスルー、青色などを付けることは望ましくありません。どうすればこの問題を防ぐことができますか？ここで

が間違って何が起こっているかのサンプルです：

amdstyle[type="6"]{ 
 
\t margin-left: .5em; 
 
\t text-decoration: line-through; 
 
\t color: blue; 
 
\t font-weight: bold; 
 
\t border-bottom: 1px solid blue; 
 
} 
 

 
amdstyle[type="6"]:before{ 
 
\t content:"{"; 
 
\t text-decoration: none !important; /* Doesn't help */ 
 
\t border-bottom: none !important; /* Doesn't help */ 
 
} 
 

 
amdstyle[type="6"]:after{ 
 
\t content:"}"; 
 
}

<amdstyle type=6>Here is my element</amdstyle>

私は前と後の擬似要素にtext-decoration: noneとborder-bottom: noneを追加して大丈夫だろうと思ったが、これはそうではありません彼らはいつも普通の要素のスタイリングをとっています。私のスタイルに!importantを加えることは役に立ちません。どのようにこれを修正することができますか？

Answer 1

疑似要素にabsoluteの位置を使用できます。

amdstyle[type="6"] { 
 
    margin-left: .5em; 
 
    text-decoration: line-through; 
 
    color: blue; 
 
    font-weight: bold; 
 
    border-bottom: 1px solid blue; 
 
    position: relative; 
 
} 
 

 
amdstyle[type="6"]:before { 
 
    content:"{ "; 
 
    position: absolute; 
 
    left: -10px; 
 
} 
 

 
amdstyle[type="6"]:after { 
 
    content: " }"; 
 
    position: absolute; 
 
    right: -10px; 
 
}

<amdstyle type=6>Here is my element</amdstyle>

Answer 2

あなたが実際に同じ要素の疑似クラスにスタイルを適用しているので、あなたは本当に要素を変更することなく、スタイルを元に戻すことはできません。ただし、以下の偽のそれのようにすることができます：私は<amdstyle>の内側に追加<span>のために行くだろう

amdstyle[type="6"]{ 
 
\t margin-left: .5em; 
 
\t text-decoration: line-through; 
 
\t color: blue; 
 
\t font-weight: bold; 
 
\t border-bottom: 1px solid blue; 
 
position: relative; 
 
} 
 

 
amdstyle[type="6"]:before{ 
 
\t content:"{"; 
 
position: absolute; 
 
left: -7px; 
 
\t text-decoration: none !important; /* Doesn't help */ 
 
\t border-bottom: none !important; /* Doesn't help */ 
 
} 
 

 
amdstyle[type="6"]:after{ 
 
\t content:"}"; 
 
position: absolute; 
 
right: -7px; 
 
}

<amdstyle type=6>Here is my element</amdstyle>

Answer 3

代わりに絶対位置を使用します。これは、すべてのブラウザがテキストを異なる方法でレンダリングし、charが何ピクセルのピクセル数を受け取るかを知ることができなくなるので、より反応します。さらに、マージン左はブレースの左側に適用されます（のここではには適用されません）。私は私のシナリオではこのアイデアを使用することはできませんが、私はアイデアのよう

amdstyle[type="6"] span { 
 
    text-decoration: line-through; 
 
    color: blue; 
 
    font-weight: bold; 
 
    border-bottom: 1px solid blue; 
 
} 
 

 
amdstyle[type="6"]:before { 
 
    content:"{"; 
 
    margin-left: .5em; 
 
} 
 

 
amdstyle[type="6"]:after { 
 
    content: "}"; 
 
}

<amdstyle type=6><span>Here is my element</span></amdstyle>