我的 contenteditable div 的占位符文本不可见？

Question

占位符之前出现在右侧并且工作正常。我用它来向用户显示建议。同样在调试模式下，我检查了文本是否存在于 div 的占位符值中，但不可见。

* {
  box-sizing: border-box;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

:host #fBar {
  position: absolute;
  display: block;
}

:host div {
  position: relative;
  overflow: hidden;
  width: calc(100% - 10px);
  margin: 0 5px;
  height: 30px;
  background-color: white;
  /*border-bottom: solid 2px #1f1f1f;*/
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-top: 1px solid #ddd;
  font-size: 15px;
  justify-content: center;
  font-weight: 200px;
  align-items: center;
  line-height: 25px;
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
}

:host div[contenteditable=true]::after {
  position: absolute;
  line-height: 25px;
  right: 5px;
  content: attr(placeholder);
  pointer-events: none;
  opacity: 0.6;
  color: blue;
  border: 1px solid red;
}

<div contenteditable="true" placeholder="I AM A PLACE HOLDER"></div>

Answer 1

更改：从 :host div[contenteditable=true]::before

中删除了 :host

<style>
            * {
                box-sizing: border-box;
                padding-bottom: 5px;
                margin-bottom: 10px;
            }

            :host #fBar {
                position: absolute;
                display: block;
            }

            :host div {
                position: relative;
                overflow: hidden;
                width: calc(100% - 10px);
                margin: 0 5px;
                height: 30px;
                background-color: white;
                /*border-bottom: solid 2px #1f1f1f;*/
                border-left: 1px solid #ddd;
                border-right: 1px solid #ddd;
                border-top: 1px solid #ddd;
                font-size: 15px;
                justify-content: center;
                font-weight: 200px;
                align-items: center;
                line-height: 25px;
                -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
                -moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
                box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
            }


            div[contenteditable=true]::before {
                position: absolute;
                line-height: 25px;
                right: 5px;
                content: attr(placeholder);
                pointer-events: none;
                opacity: 0.6;
                color:blue;
                border:1px solid red;
            }
        </style>
        <div contenteditable="true" placeholder="I AM A PLACE HOLDER"></div>

我的 contenteditable div 的占位符文本不可见？

The placeholder text for my contenteditable div is not visible?

html

css

placeholder

contenteditable