我有一些CSS樣式的DIV和DIV內(nèi)的文本。如何將文本移出DIV并使用CSS或JavaScript應(yīng)用一些樣式？

超文本標記語言

<div class="divstyle">TEXT</div>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.divstyle {
    width: 200px;
    height: 50px;
    background-color: grey;
}

我用javascript創(chuàng)建了完整的DIV:

var inputfield = document.createElement("div");
inputfield.textContent = inputfieldData['TEXT'];
inputfield.classList.add("divstyle");
inputfieldsContainer.appendChild(inputfield);

當(dāng)它在瀏覽器中呈現(xiàn)時，看起來像這樣:

+-----------------+
| TEXT            |
+-----------------+

我希望像這樣:

TEXT
+-----------------+
|                 |
+-----------------+

我嘗試了什么:

.divstyle::before {
    top: -50px;
    left: -20px;
}

有沒有只使用CSS在DIV內(nèi)部添加DIV的方法？ 也許解決方案可以是將文本包裝在某個標簽中并對其應(yīng)用CSS，但是是否有可能通過CSS來實現(xiàn)呢？

還不完全清楚你想要什么，也許像這樣的東西會適合你:

div {
  display: inline-grid;
  grid-auto-rows: 1fr;
}

div:after {
  content: '';
  border: dashed 1px;
}

<div>TEXT</div>

您可以將偽元素的內(nèi)容設(shè)置為“text”并執(zhí)行以下操作，而不是在div中設(shè)置文本。

<div class="divstyle"></div>
.divstyle {
    width: 200px;
    height: 50px;
    background-color: grey;
    position: relative;
    margin-top: 50px;
}

.divstyle::before{
    content: 'TEXT';
    position: absolute;
    top: -50%;
}

https://codepen.io/caglar62/pen/LYgaPPW

您可以使用另一種樣式添加一個跨度(這里是:textstyle)

<div class="divstyle">
    <span class="textstyle">
        TEXT
    </span>
</div>

可能是這樣的

.textstyle {
        position: absolute;
        top: -20px;
        font-size: 24px;
    }

這里需要注意的重要部分是，position被設(shè)置為absolute，所以可以相對于它的第一個定位的祖先元素來定位它。

雖然我不明白你為什么要這樣做，但這里有兩種方法可以實現(xiàn):

第一種方式: 超文本標記語言

<div class="divstyle">
  <span class="out">TEXT</span>
</div>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.divstyle {
  position: relative;
  background-color: grey;
}
.out {
  position: relative;
  top: -1em;
}

2/第二種方式(看完你的第一條評論) :

超文本標記語言

<div class="divstyle" content="TEXT">&nbsp;</div>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.divstyle {
  background-color: grey;
}
.divstyle:before {
  content: attr(content);
  position: absolute;
  top: -1em;
}