1

コマンド ライン プロンプトのようにコードの前に '$' を付けたいのですが、その '$' を強調表示可能なテキストの一部にしないでください。

index.html

<pre class="pre-scrollable">  
    <span class="com">git clone https://github.com/vccabral/vagrant-django-template-1.git</span>  
    <span class="com">cd vagrant-django-template-1</span>  
    <span class="com">vagrant up</span>  
    <span class="com">vagrant ssh</span>  
    <span class="com">python -c "import this"</span>  
</pre>
4

1 に答える 1

3

これはCSS 2.1です（当時は存在を知りませんでした）これを行う方法（demo）：

.com::before {
  content: "$";
  display: inline;
}

コピーして貼り付けると、$. もちろん、これは対象のブラウザーでサポートされていない可能性のある CSS を使用しています。これは、content宣言または CSS 生成コンテンツと呼ばれます。 これがそのサポートのリストです。

また、html にわずかな変更を加えると、点滅するカーソルを追加できます ;)

<pre class="pre-scrollable">  
    <span class="com">git clone https://github.com/vccabral/vagrant-django-template-1.git</span>  
    <span class="com">cd vagrant-django-template-1</span>  
    <span class="com">vagrant up</span>  
    <span class="com">vagrant ssh</span>  
    <span class="com last">python -c "import this"</span>  
</pre>

.com::before {
    content: "$";
    display: inline;
}

.com.last::after {
    content: "_";
    display: inline;
    text-decoration:blink;
}
于 2012-12-28T06:14:01.587 に答える