专注于输入字段后，仅使用CSS更改放置在另一个div中的内容

Question

我当前正在编辑聊天框。我将焦点放在输入字段下方的相同输入字段更改为红色图标之后，得到了输入字段。我使用after属性来放置该图标。是否可以仅使用CSS？

#msgbox_main .txtarewrap:after {
content: "/f1d8" !important;
position: absolute !important;
right: 10px !important;
bottom: 10px !important;
}
#msgbox_main .txtarewrap:focus:after {
content: "PPPP" !important;
position: absolute !important;
right: 10px !important;
bottom: 10px !important;
}