The placeholder text for my contenteditable div is not visible?

Question

The place holder was appearing before on the right hand side and was working properly. I am using it to show suggestions to the user. Also in debugging mode ive checked that the text is present there in the placeholder value of the div but is not visible.

* {
  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

Changes: removed :host from :host div[contenteditable=true]::before

<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>