web-dev-qa-db-ja.com

CSS疑似要素を作成：メイン要素と同じ高さの前

私はずっと探していましたが、これに対する解決策を自分で見つけることができませんでした。基本的なコンテンツ編集可能なコードエディターを作成しようとしています。行番号については、CSS疑似要素にカウンターが設定された各行に段落を使用することを選択しました。

.editor {
  display: inline-block;
  border: 1px black solid;
  font-family: "Consolas", "Monaco", "Courier New", monospace;
  counter-reset: line;
  width: 90%;
  height: 350px;
  overflow: scroll;
  padding-left: 0;
  margin-left: 0;
  z-index: 1;
}

.editor p {
  display: block;
  counter-increment: line;
  background-color: #FFF;
  text-align: left;
  margin: 0px;
  z-index: 2;
  outline: none;
}

.editor p:before {
  display: inline-block;
  width: 2em;
  height: 100%;
  border-right: 1px black solid;
  padding-right: 1em;
  margin-right: 1em;
  content: counter(line);
  color: #FFF;
  background-color: #006;
  text-align: right;
  /*-webkit-user-select: none;
    user-select: none;*/
}
<div class="editor" contenteditable="true" spellcheck="false">
  <p>Some paragraph</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet nunc non pulvinar luctus. Cras finibus turpis at arcu mollis, nec fermentum mi pretium. Aliquam suscipit lacus sapien, eu fringilla enim malesuada quis. Sed ut tincidunt erat.
    In posuere vulputate venenatis. Mauris quis porta magna. Phasellus pharetra in nisl et luctus. Etiam in ultrices risus. Morbi vel dapibus ex. Suspendisse gravida libero non malesuada congue. Pellentesque ut nunc diam.</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>

</div>

問題は、段落が少し長い場合、残りのテキストが私のカウンター疑似要素の下に配置されることです。 ：beforeカウンターを段落と同じ高さに伸ばしたい。

ここで説明するように、段落でposition:relativeを使用し、p：before疑似要素でposition:absolute; height:100%を使用してみました： 疑似要素は非疑似要素の高さをどのように検出できますか？

私の場合、これは機能しません。p：before要素を超えて段落をカバーしたくないので、今と同じ動作をしたいだけです。p:before要素を同じ高さでストレッチしたいだけです。メインのpとして。

また、ラッパーコンテナの幅を超えてラインストレッチを作成したくありません。私は多くの方法を試してきましたが、解決策にたどり着きませんでした。

csscountercontenteditablepseudo-element
13
just some guy

heightの代わりに、pにはposition:relativeを使用し、beforeにはabsoluteを使用します

Js Fiddle

cssに追加された新しいプロパティ

.editor p {
    position:relative;
    padding-left:3.5em;
}

.editor p:before {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
 }

編集

それは2番目の質問でなければなりません：D

enterでIeを押しても、brは作成されませんが、最近のブラウザーでは、:afterを使用してbrが作成されるため、pタグが空のままにならないように問題が修正されます。

Js Fiddle

.editor {
  display: inline-block;
  border: 1px black solid;
  font-family: "Consolas", "Monaco", "Courier New", monospace;
  counter-reset: line;
  width: 90%;
  height: 350px;
  overflow: scroll;
  padding-left: 0;
  margin-left: 0;
  z-index: 1;
}
.editor p {
  display: block;
  counter-increment: line;
  background-color: #FFF;
  text-align: left;
  margin: 0px;
  z-index: 2;
  outline: none;
  position: relative;
  padding-left: 3.5em;
}
.editor p:before {
  display: inline-block;
  width: 2em;
  height: 100%;
  border-right: 1px black solid;
  padding-right: 1em;
  margin-right: 1em;
  content: counter(line);
  color: #FFF;
  background-color: #006;
  text-align: right;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /*-webkit-user-select: none;
    user-select: none;*/
}
.editor p:after {
  content: " "
}
<div class="editor" contenteditable="true" spellcheck="false">
  <p>Some paragraph</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet nunc non pulvinar luctus. Cras finibus turpis at arcu mollis, nec fermentum mi pretium. Aliquam suscipit lacus sapien, eu fringilla enim malesuada quis. Sed ut tincidunt erat.
    In posuere vulputate venenatis. Mauris quis porta magna. Phasellus pharetra in nisl et luctus. Etiam in ultrices risus. Morbi vel dapibus ex. Suspendisse gravida libero non malesuada congue. Pellentesque ut nunc diam.</p>
  <p>one</p>
  <p>two</p>
  <p>three</p>
</div>
29
Vitorino fernandes

行番号と行をテーブルのように表示したいので、自然なアプローチはそれらをテーブルにすることです。編集可能な領域をテーブルとして宣言し（CSSの意味で）、行を行にし、生成された行番号をテーブルセルにします。 ：

.editor {
        display: tablek;
    border: 1px black solid;
    font-family: "Consolas", "Monaco", "Courier New", monospace;
    counter-reset: line;
        
        width:90%;
        height:350px;
        overflow:scroll;
        padding-left:0;
        margin-left:0;
        z-index:1;
        
}
.editor p {
        display: table-row;
    counter-increment: line;
        background-color:#FFF;
        text-align:left;
        margin:0px;
        z-index:2;
        outline: none;
        
}
.editor p:before {
        display: table-cell;
    width:2em;
        height:100%;
    border-right: 1px black solid;
    padding-right: 1em;
    margin-right: 1em;
    content: counter(line);
        color:#FFF;
        background-color:#006;
        text-align:right;
        
        /*-webkit-user-select: none;
    user-select: none;*/
}
<div class="editor" contenteditable="true" spellcheck="false">
<p>Some paragraph</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet nunc non pulvinar luctus. Cras finibus turpis at arcu mollis, nec fermentum mi pretium. Aliquam suscipit lacus sapien, eu fringilla enim malesuada quis. Sed ut tincidunt erat. In posuere vulputate venenatis. Mauris quis porta magna. Phasellus pharetra in nisl et luctus. Etiam in ultrices risus. Morbi vel dapibus ex. Suspendisse gravida libero non malesuada congue. Pellentesque ut nunc diam.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
2
Jukka K. Korpela

http://jsfiddle.net/zppb29jw/2/

p {
    position:relative;
    left: 4em;
    ...

p:before {
    position:absolute;
    right:100%
    display:block;
    ...

大丈夫ですか？

0
webdev-dan
.black_right{
    position: relative;
    display: table;
    width: 100%;
    z-index: 10;
}
.black_right::after{
    content: " "; 
    top: 0px;
    height: 100%;
    width: 100%;
    box-shadow: 500px 0px #000;
    position: absolute;
}
0
user3432605